子要素（小親要素内）を拡大（要素数に応じて）

Question

小さな要素（約20ピクセル）と数字（何回何が何回使用されたか）があるテーブルがあります。ホバー上には、それが使用された場所を含む子要素（絶対位置）が表示されます。だからリンクがあり、それは数百pxの幅さえあるかもしれません。 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>

問題は、私はその幅を設定しなければならないということです：20emを。すべてのリンク要素を別々の行に入れたくない場合。なぜなら.list要素は親（.el-used）に収まるようにしようとしているので、幅が狭く、テキストが折り返されていると仮定しています。 （その幅の代わりに）のみを設定したいと思います。 max-width：20emであり、要素が1つしかない場合は縮小し、要素がある場合は20,000まで拡張します。

私はそれをどのように解決できますか？

Answer 1

私はあなたのHTMLをリファクタリングすることをかなり注意してください：div should not reside within a spanを：はリストをマークアップする必要がありますされていることなど、要素を入れ子にするとき、したがって<ul>

が世話を

• もの
• 要素のデフォルト値は、display -property：spanです。inlineです。一方、divは、blockです。インラインテキストの流れを次の、ブロックが破損の原因となり、あなたがあなたのマークアップが常駐したい言及したので、パディング/マージン

編集に

を持つことができるのに対し、：これはあなたがCSSのフルパワーを活用することができます理解しますテーブルの中で、私はこれを説明するために私の元の答えを編集しました。基本的には、リスト項目をwhite-space: nowrap;に設定すると、内部的に改行を防ぐことができます。

また、いくつかの要素を持つ広いボックスのサイズを手動で指定するクラス.wideを追加しました。この幅は手動で設定する必要があります。少なくとも固定幅のないソリューションは考えられませんでした。以下に2つの例を示します。(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>