0

所以，我正在为我的网站制作一个导航栏，但问题是，我似乎无法让它适合整个屏幕宽度。（注意：仍在工作吧，所以如果有任何无用的代码，请尽量忽略它：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;  
}
4

2 回答 2

0

将链接放在各个 < li ></li > 标记之间。要将元素扩展到屏幕宽度，请使用 width: 100%;。

于 2012-07-31T16:10:52.563 回答
0

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

我在想你的按钮没有以 100% 的宽度显示的原因是因为你需要显示你的<li>as 块或 inline-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>
于 2012-07-31T16:16:28.247 回答