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

将个人＆lt;之间的链接放在一起li＆gt; / li＆gt;标签。要将元素扩展为屏幕宽度，请使用width：100％;。

Answer 2

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

我在想你的按钮没有显示宽度100％是因为你需要将<li>显示为块或内联块，并且因为你的标记不太正确。

.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>

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

2 个答案: