css - 「display:block」を使用せずに、タグを新しい行に移動します。

Question

このページのナビゲーション リンクをそれぞれの行に表示したいと思います。

A. " " を使用しない場合-要素display:blockだけでなく、ホバー アニメーションがコンテナーの全幅を占有するためです。<a>

B.<br>タグを使用しない。最終的には、小さな画面で水平方向のナビゲーションを備えたレスポンシブ サイトを作成することを検討しています。

ご協力いただきありがとうございます。

Answer 1

試しましたfloat:left; clear:leftか？

Answer 2

ul、li でナビゲーションをラップします。

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS:

ul {list-style: none} li {display: block}

これにより、アンカーを強制的に改行させながら、それに応じてアンカーのスタイルを設定できます。

Answer 3

をラップして、<a>CSS<div>を to に適用divできfloat:leftますclear:left。

div.anchorContainer
{
    float:left;
    clear:left;
}

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>