Liは左揃えされていません。ブロックレベルの要素として動作します。

Question

私のウェブページには一定量の動的<li>要素があります。私は親に特定の幅、すなわち<ul>を持っています。私の使用例は、それぞれの<li>タグを浮かべておき、それが親の幅に達すると非表示にすることです。しかし、<li>タグはブロックレベルの要素として機能します。親タグに幅が削除されていれば正常に動作します。しかし、私はそれが特定の幅に達するとすべての子ノードを隠したいので、私は親に幅が必要です。私が試したコードhereを参照してください。

 <ul class="tabsheet_sht"> 
     <li class="actives">Sheet1</li> 
     <li>Sheet2</li> 
     <li>Sheet3</li> 
    </ul> 
    .tabsheet_sht { 
    float: left; 
    width: 100px; 
    overflow: auto; 
    padding:0 
} 
.tabsheet_sht li { 
    display: inline-block; 
    padding: 4px 10px; 
    text-align: center; 
    border-right: 1px solid #dfdfdf; 
    position: relative; 
    color: #000; 
    font-size: 12px; 
} 

Answer 1

以下のコードが有効です。追加white-space: nowrap;〜ul

.tabsheet_sht { 
    float: left; 
    width: 100px; 
    overflow: auto; 
    padding:0; 
    white-space: nowrap; 
}