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;
}