0

我创建了一个<ul>包含几个固定宽度选项卡（比如 25 像素）的选项卡，但我需要让其中一个<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; }
4

1 回答 1

1

您可能需要在边框上做一些工作，例如将文本包裹li在 a 中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;
}
于 2013-06-11T19:59:24.263 回答