Html ul作为标签，具有单可变长度li

我已经创建了一个

，其中包含几个固定宽度的选项卡（比如25px），但我需要使其中一个

“选项卡”占用
的剩余宽度。此可变长度
将包含另一个动态加载的“选项卡”列表，可以循环查看所有可用选项卡。我试着让
有一个
位置：绝对的
和更多，但似乎无法解决这个问题

以下是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>

您可能需要在边框上做一些工作，比如将
li
中的文本包装在
span
中，然后对该
span
执行边框操作，而不是
li

HTML:

你知道你没有结束标记吗？@imruction除非是XHTML，否则它们是可选的。@Juhana我知道，只是指出：）谢谢提示imruction，但不是Juhana指定的XHTML:）可能重复：谢谢帮助hmhcreative，但是我们使用预先编写的代码与
交互，因此我的解决方案需要保留这种结构。我稍微调整了代码（显然），但这个解决方案似乎是有效的！谢谢你的创意！我可能很快就和你谈过了。。。父级
的动态长度
中的选项卡仅包裹子级
。我尝试过应用“溢出：隐藏”，但没有成功。有什么想法吗？如果我将“宽度：200%”应用于“.tabs.dynamictabs ul”，则显示再次正确，但随后我将强制设置宽度。我需要动态的。你能像这样把
ul
包装在
div
里吗<代码>
.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; }

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

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