登录 | 注册 | FAQ
Anonymous

CSS Men Bar help

+ 发表回复

5 篇帖子 分页: 1 / 1


CSS Men Bar help

wolf_adventures » 周二 4月 22, 2014 11:28 am

I've been trying to create a horizontal men bar with CSS and HTML, and while the actual design looks fine, I can't get it to display in the middle of the page. I've tried text-align and margin:auto, but no luck....
Here is the code for the HTML:
代码: 全选
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
</ul>

.....and the CSS:
代码: 全选
#nav {
   display:none;
   text-align:center;
   font-size:2em;
   font-family:Century;
   list-style-type:none;
   background-color:green;
   color:white;
   text-align:center;
}
#nav a {
   color:white;
   text-decoration:none;
}
#nav a:hover {
   background-color:#339933;
   color:white;
}
#nav li {
   text-align:center;
}
@media screen and (max-width: 800px) {
   #nav {
       display:inline;
    }   
    #nav li {
        display:inline;
    }
}

头像

wolf_adventures

  • 帖子: 3
  • 注册: 周二 4月 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>

Re: CSS Men Bar help

comport9 » 周六 5月 31, 2014 12:56 am

Try encapsulating the "ul" in a <nav></nav> and then put "nav { text-align: center; }" in your css. BTW, you have text-align:center twice.
头像

comport9

  • 帖子: 28
  • 注册: 周日 11月 04, 2012 5:35 pm

Re: CSS Men Bar help

wolf_adventures » 周六 5月 31, 2014 9:05 am

comport9 写道:Try encapsulating the "ul" in a <nav></nav> and then put "nav { text-align: center; }" in your css. BTW, you have text-align:center twice.

I'll try that :)
头像

wolf_adventures

  • 帖子: 3
  • 注册: 周二 4月 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>

Re: CSS Men Bar help

XainPro » 周六 5月 31, 2014 11:21 am

What do you mean by
can't get it to display in the middle of the page ?
if you mean to align text to center then use

#nav li {text-align:center;}

or explain it further !
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: CSS Menu Bar help

wolf_adventures » 周六 5月 31, 2014 11:41 am

XainPro 写道:What do you mean by
can't get it to display in the middle of the page ?
if you mean to align text to center then use

#nav li {text-align:center;}

or explain it further !

I've tried that, but it does not seem to be working...
头像

wolf_adventures

  • 帖子: 3
  • 注册: 周二 4月 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>


+ 发表回复

分页: 1 / 1