li浮動不隱藏

Question

我複製了w3school網站本身的css，但我沒有得到相同的結果。我想要浮動li元素在屏幕右端溢出時消失，但它們始終顯示在容器下方。

https://jsfiddle.net/qeub71Lp/

.w3-left { 
 
float: left!important; 
 
} 
 
.w3-navbar { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
} 
 
.w3-navbar li { 
 
float: left; 
 
overflow: hidden; 
 
}

<div class="w3-card-2 w3-slim topnav" id="topnav" style="position: relative;"> 
 
    <div style="overflow:auto;"> 
 
     <ul class="w3-navbar w3-left" 
 
    style="width:55%;overflow:hidden;height:44px"> 
 
      <li><a href="" class="w3-hide-small">HTML</a></li> 
 
      <li><a href="" class="w3-hide-small">CSS</a></li> 
 
      <li><a href="" class="w3-hide-small">JAVASCRIPT</a></li> 
 
      <li><a href="" class="w3-hide-small">SQL</a></li> 
 
      <li><a href="" class="w3-hide-small">PHP</a></li> 
 
      <li><a href="" class="w3-hide-small">BOOTSTRAP</a></li> 
 
      <li><a href="" class="w3-hide-small">JQUERY</a></li> 
 
      <li><a href="" class="w3-hide-small">ANGULAR</a></li> 
 
      <li><a href="" class="w3-hide-small">XML</a></li> 
 
      <li><a href="" class="w3-hide-small">W3.CSS</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

你必須減少ul

<ul class="w3-navbar w3-left" style="width:55%;overflow:hidden;height:20px"> 

這裏高度更新JSfiddle

Answer 2

我ñ不要相信你應該使用floats。

標準float行爲是，當沒有更多的水平空間離開時，下一個元素將顯示在下一行。

因此inline-block可能是比float更好的選擇。

工作實例：

.topnav { 
 
position: relative; 
 
left: 50vw; 
 
width: 50vw; 
 
background-color: rgb(191,191,191); 
 
overflow: hidden; 
 
} 
 

 
.w3-navbar { 
 
height:1.4em; 
 
line-height: 1.4em; 
 
margin: 0; 
 
padding: 0; 
 
list-style-type: none; 
 
overflow: hidden; 
 
} 
 

 
.w3-navbar li { 
 
display: inline-block; 
 
margin-right: 12px; 
 
}

<div class="topnav"> 
 

 
<ul class="w3-navbar"> 
 
<li><a>HTML</a></li> 
 
<li><a>CSS</a></li> 
 
<li><a>JAVASCRIPT</a></li> 
 
<li><a>SQL</a></li> 
 
<li><a>PHP</a></li> 
 
<li><a>BOOTSTRAP</a></li> 
 
<li><a>JQUERY</a></li> 
 
<li><a>ANGULAR</a></li> 
 
<li><a>XML</a></li> 
 
<li><a>W3.CSS</a></li> 
 
</ul> 
 

 
</div>

Answer 3

請試試這個代碼

HTML

<div class="w3-card-2 w3-slim topnav" id="topnav" style="position: relative;"> 
     <div style="overflow:auto;"> 
     <ul class="w3-navbar w3-left" style="width:55%;overflow:hidden;height:20px;"> 
      <li><a href="" class="w3-hide-small">HTML</a></li> 
      <li><a href="" class="w3-hide-small">CSS</a></li> 
      <li><a href="" class="w3-hide-small">JAVASCRIPT</a></li> 
      <li><a href="" class="w3-hide-small">SQL</a></li> 
      <li><a href="" class="w3-hide-small">PHP</a></li> 
      <li><a href="" class="w3-hide-small">BOOTSTRAP</a></li> 
      <li><a href="" class="w3-hide-small">JQUERY</a></li> 
      <li><a href="" class="w3-hide-small">ANGULAR</a></li> 
      <li><a href="" class="w3-hide-small">XML</a></li> 
      <li><a href="" class="w3-hide-small">W3.CSS</a></li> 
     </ul> 
     </div> 
     </div> 

CSS

.w3-left { 
    float: left!important; 
} 

.w3-navbar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow:hidden; 
    height:44px 
} 

ul li { 
    display: block; 
    padding: 0 5px; 
} 

.w3-navbar li { 
    float: left; 
    overflow: hidden; 
} 

*, *:before, *:after { 
    box-sizing: inherit; 
}