Question

我创建了一个<ul>，其中包含几个固定宽度的标签（例如25px），但我需要让其中一个<li>“标签”消耗{{{ 1}}。此变量长度<ul>将包含另一个动态加载的“标签”列表，可以循环查看所有可用标签。我已经尝试让<li>拥有<ul>等等，但似乎无法弄明白这一点。

这是HTML：

position: absolute

这是CSS：

<ul class="tabs">
<li class="scroll" style="float: right;" title="Scroll Right">&gt;&gt;
<li>ABC
<li>123
<li class="scroll" title="Scroll Left">&lt;&lt;
<li class="dynamictabs">  <!-- this needs to fill the rest of the width -->
   <ul>
    <li>first dynamic tab
    <li>second dynamic tab
    <li>...
   </ul>
</li>
</ul>

Answer 1

您可能需要在边框上稍作一些工作，例如将li中的文字换成span，然后为span而不是li做边框。

HTML：

<ul class="tabs">

<li>ABC
<li>123
<li class="scroll" title="Scroll Left">&lt;&lt;
<li class="dynamictabs">  <!-- this needs to fill the rest of the width -->
   <ul>
    <li>first dynamic tab
    <li>second dynamic tab
    <li>...
   </ul>
</li>
<li class="scroll" title="Scroll Right">&gt;&gt;
</ul>

CSS：

.tabs {
    display: table;
    width: 100%;
}
.tabs > li {
    display: table-cell;
    width: 25px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
}

.tabs .dynamictabs {
    width: auto;
    position: relative;
}

.tabs .dynamictabs ul {
    position: absolute;
    width: 100%;
    display: block;
}

ul作为具有单个可变长度li的选项卡

1 个答案: