1

在此先感谢您的帮助。我使用列表创建了一个导航栏。我希望该列表中的单词保持在相同的位置，但是当浏览器的大小调整为较小时，文本会换行。您可以在此处参考 Jfiddle。http://jsfiddle.net/kadeemlaurie/KGwWV/

这是 HTML

<div id="wrap">
 <div class="cntranav"> 
   <ul> 
       <li class="active"><a href="#">+Contrabang</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Events</a></li>
       <li><a href="#">Store</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>  
        <div class="clearFloat"></div>
    </ul>
 </div></div>

这是CSS

body 
{ margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px}

.cntranav{
 font-family:Arial, 
 Helvetica, sans-serif;
 font-size:12px;font-weight:bold;}.

 cntranav ul{
list-style:none;
background:#2d2d2d;
background-image: none;
border-bottom: 1px solid #000;
height:40px;
padding:2px;}

.cntranav li{
display:block;
float:left;}

.cntranav li:
first-child{
margin-left:5px;}

.cntranav a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;}

.cntranav a:hover,
.cntranav li.active a{
font-weight:bold;
color:#fff;
border-top:0px solid #;}

.clearFloat{
clear:both;}

ul.ul.cntranav li {
float:left;
padding:7px 8px; }

ul.cntranav li.active{  
border-top: solid 0px #;
color:#fff;
font-weight:bold;}

ul.cntranav li:hover{
background:#383835;
cursor:pointer;}
4

1 回答 1

0

设置宽度.cntranav（例如，800 像素）。当您调整浏览器大小或放大时，浏览器会将列表项从水平导航栏中向下推送到新行。它这样做是因为它试图使它们在视口中保持可见，无论大小如何，没有任何重叠. 围绕此的规则非常技术性（我并不全部了解），但简短的回答是您需要在导航容器上指定绝对宽度以防止这种情况发生。

于 2012-12-22T14:29:42.313 回答