Question

提前感谢您的帮助。我使用列表创建了一个导航栏。我希望该列表中的单词保持在相同的位置，但是当浏览器调整为较小时，文本将换行。你可以在这里参考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;}

Answer 1

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

阻止文本包装在<ul>列表</ul>中

1 个答案: