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します（たとえば、800px）。ブラウザのサイズを変更したりズームインしたりすると、ブラウザは水平方向のナビゲーションバーから新しい行にリストアイテムをプッシュします。これは、サイズに関係なく、重複することなく、リストアイテムをビューポートに表示したままにするためです。 。これに関するルールはかなり技術的です（そして私はそれらすべてを知りません）が、簡単な答えは、これが起こらないようにnavコンテナで指定された絶対幅が必要であるということです。

于 2012-12-22T14:29:42.313 に答える