悬停时扩展子元素（在小父元素中）（取决于元素数量）

Question

我有一个表格，其中有带有数字的小元素（大约 20 像素）（使用了多少次）。悬停时显示子元素（绝对位置），其中包含使用它的位置。所以有链接，它甚至可能是几百像素的宽度。 HTML 看起来像这样：

.el-used {
  position: relative;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  width: 20em;
  padding: 15px;
  z-index: 10;
  border: inherit;
  border-radius: 3px;
  color: #666;
  background: #fff;
}

.el-used:hover .list {
  display: inline-block;
}

.el-used .list a {
  margin-right: 15px;
  white-space: nowrap;
}

<div><span class="el-used">1<span class="list">Wszystkie</span></span>
</div>
<div><span class="el-used">1<span class="list"><a href="/1">O firmie</a></span></span>
</div>
<div><span class="el-used">6<span class="list"><a href="/">O firmie</a> <a href="/4">Oferta</a> <a href="/5">Podstrona 1</a> <a href="/6">Podstrona 2</a> <a href="/8">Podstrona 4</a> <a href="/2">Mapa strony</a></span></span>
</div>

问题是我必须设置 width:20em; 如果我不希望每个链接元素都在单独的行中。因为我假设 .list 元素正试图适应父级（.el-used），所以它的宽度很小并且文本被换行。 我只想设置（而不是那个宽度），例如max-width:20em 如果只有一个元素它会缩小，当有更多元素时它会增长（最多这 20em）。

一些建议如何解决？

Answer 1

请注意，我对您的 HTML 做了相当多的重构：

• 是列表的东西应该被标记为这样，因此<ul>
• 嵌套元素时要小心：a div should not reside within a span
• 注意元素的默认display-property：spans 是inline，而divs 是block；理解这一点将使您能够充分利用 CSS 的强大功能：内联跟随文本流，而块导致中断并且可以有填充/边距

编辑

由于您提到希望将标记保存在表格中，因此我编辑了原始答案以解决此问题。基本上，将列表项设置为white-space: nowrap; 可以防止它们在内部换行。

我还添加了一个类.wide，它手动指定包含多个元素的框的宽度。您必须手动设置此宽度；至少我想不出没有固定宽度的解决方案。下面是两个例子：(6) 有.wide 并且列表项展开，(12) 没有.wide，因此它们在彼此下方对齐。

td {
  border: 1px solid black;
}

.wrapper {
  position: relative;
}

.el-used {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  padding: 15px;
  border: inherit;
  max-width: 20em;
  border-radius: 3px;
  color: #666;
  background: #fff;
  z-index: 10;
  list-style-type: none;
}

.el-used .list.wide {
  width: 15em;
}

.el-used:hover .list {
  display: block;
}

.el-used .list li {
  display: inline-block;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li>Wszystkie</li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li><a href="/1">O firmie</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            6
            <ul class="list wide">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            12
            <ul class="list">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
  </tbody>
</table>