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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我可以解决一些建议吗？

Answer 1

请注意我重构了你的HTML：

• 列表的内容应该标记为这样，因此<ul>
• 在嵌套元素时要小心：div should not reside within a span
• 请注意元素的默认display - 属性：span s为inline，而div为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>