导航栏没有正确填充屏幕宽度

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

来源

2012-07-31 Sidetracking

，我认为你的一些HTML的缺失。否则，你有''没有对应'

'... – KRyan 2012-07-31 16:06:55

试着做这样的事情...

我想你的按钮不上宽度100％露面的原因是因为你需要显示你<li>为块或内联块，和因为你的标记不完全正确。

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

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

然后作为权提到..你的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-31 16:16:28

非常感谢你的回答，你是一个巨大的帮助。我适应了一点，现在它已经非常有用了，只需要把它磨光！ – Sidetracking 2012-07-31 16:42:15

没问题。很高兴我能帮上忙。 – 2012-07-31 18:36:51

把个人< LI> </LI>标记之间的联系。要将元素展开为屏幕宽度，请使用宽度：100％;.

来源

2012-07-31 16:10:52 Kwon

嘿谢谢你的回复！无论如何，我做了你所说的，似乎正在取得进展，但是，只有联系人按钮正在显示。我会尽快更新代码。 – Sidetracking 2012-07-31 16:17:36

您已声明位置：固定为链接。摆脱这一点，你只需要它的列表元素。（或者所以我猜） – daveyfaherty 2012-07-31 16:24:47

不知道你想要的链接扩展到页面的长度或不，但这里有一个简单的例子。 http://jsfiddle.net/LHRZA/4/ – Kwon 2012-07-31 16:37:11

导航栏没有正确填充屏幕宽度

回答

相关问题