html - 動的幅をブロック要素に設定するにはどうすればよいですか？

Question

.lollipopを持っているクラスを持つ30の要素がありline-height: 30px; height: 30px;ます。

<a class="lollipop">Random text</a>
<a class="lollipop">Random text longer</a>
<a class="lollipop">Short</a>
...

動的な幅（通常のように、内部にあるテキストの量に基づいて幅が調整されます）を持ち、おそらく他のHTML要素を追加せずに、1行にこれらの要素を1つだけ持つようにCSSを作成するにはどうすればよいですか？

score 3 · Accepted Answer

おそらく最も簡単な方法は次のとおりです。

a {
    float: left;
    clear: left;
}

これにより、HTMLを変更する必要がなくなります。

score 0 · Accepted Answer

display: table-rowすべてのリンクに同じ幅が必要な場合は、リンクの最大幅に合わせて柔軟な幅を計算してみてください。

または、デザインに問題が発生する場合に備えて、疑似で遊んで:before、フロートやクリアのないクリアのようなものを作成することもできます。

2 に答える 2