导航栏没有正确填充屏幕宽度
因此,我正在为我的网站制作导航栏,但问题是,我似乎无法使其适合整个屏幕宽度。 (注:仍然在酒吧工作,所以如果有任何无用的代码,请尽你所能忽略它: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;
}
试着做这样的事情...
我想你的按钮不上宽度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>
非常感谢你的回答,你是一个巨大的帮助。我适应了一点,现在它已经非常有用了,只需要把它磨光! – Sidetracking 2012-07-31 16:42:15
没问题。很高兴我能帮上忙。 – 2012-07-31 18:36:51
把个人< LI> </LI>标记之间的联系。要将元素展开为屏幕宽度,请使用宽度:100%;.
嘿谢谢你的回复!无论如何,我做了你所说的,似乎正在取得进展,但是,只有联系人按钮正在显示。 我会尽快更新代码。 – 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
,我认为你的一些HTML的缺失。否则,你有''没有对应'