html - ul 作为具有单个可变长度 li 的制表符

Question

我创建了一个 <ul>包含几个固定宽度的选项卡(比如 25px)，但我需要制作一个 <li> “制表符”占用了 <ul> 的剩余宽度.这个可变长度 <li>将包含另一个动态加载的“选项卡”列表，可以循环查看所有可用选项卡。我试过制作 <ul>有一个position: absolute等等，但似乎无法弄清楚。

这是 HTML:

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

这是 CSS:

.tabs {
  position: absolute;
  top: 100px;
  margin: 0 5px;
  z-index: 20; }
.tabs li {
  display: inline-block;
  margin: 0 2px;
  width: 28px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
  opacity: 0.2; }

.tabs ul {
  position: absolute;
  left: 100px;
  right: 50px;
  white-space: nowrap;
  overflow: hidden; }
.tabs ul li {
  display: inline-block;
  width: auto; }

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