html - 导航栏未正确填充屏幕宽度

Question

所以，我正在为我的网站制作一个导航栏，但问题是，我似乎无法让它适合整个屏幕宽度。 (注意:仍然在栏中工作，所以如果有任何无用的代码，请尽量忽略它 :P)

当我设置自动宽度(在左填充)时，它只填充屏幕的一小部分，但是当我设置 100% 宽度时，它不会显示实际的按钮。我可以做 px 或 em，因为它会弄乱不同的屏幕尺寸。

任何帮助都会很棒，谢谢!

HTML-`

<ul class="menu">  
<li class="menu"><a href="/wordpress/">Home</a></li>
<li><a href="/wordpress/">About</a></li>
<li><a href="/wordpress/">Blog</a></li>
<li><a href="/wordpress/">Services</a></li>
<li><a href="/wordpress/">Portfolio</a> </li>
<li><a href="/wordpress/">Contacts</a></li>

---

CSS-

                 ul.menu a {  
    display: inline-block;  
    padding: 0 30px;
    border-left: 0px solid rgba(255,255,255,0.1);  
    border-right: 0px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 50px;  
    background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);

    -webkit-transition-property: c0c0c0;  
    -webkit-transition-duration: 300ms;  
    -moz-transition-property: c0c0c0;  
    -moz-transition-duration: 300ms;
    margin-top: -8.3em;
    position: fixed;
    }   

}  

ul {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width: 100%;


}  

ul.menu {  
    height: 30px;  
    border-left: 0px solid ;  
    border-right: 0px solid ;
    float:left; 


    padding:0;
}  

ul.menu li {  
    display:inline-block;
    list-style: none;
    float:left;  
    height: 30px;  
    text-align: center;  

    }  



ul li a:hover {  
    background: #000000;  
}  

Answer 1

尝试做这样的事情......

我在想你的按钮没有以 100% 宽度显示的原因是因为你需要显示你的 <li>作为 block 或内联 block ，并且因为您的标记不太正确。

.menu {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width:100%;
}

.menu li {
    display:inline-block;
    float:left;
}

然后正如 Kwon 提到的那样......你的 HTML 应该是这样的......

<ul class="menu">  
    <li><a href="/wordpress/">Home</a></li>
    <li><a href="/wordpress/">About</a></li>
    <li><a href="/wordpress/">Blog</a></li>
    <li><a href="/wordpress/">Services</a></li>
    <li><a href="/wordpress/">Portfolio</a> </li>
    <li><a href="/wordpress/">Contacts</a></li>
</ul>