これらのインライン要素がdivをオーバーフローするのを止める方法はありますか？

Question

私は実線の境界線を持つdivを持っています。このdiv内には複数の 'tags'があり、divの境界内にすべて含める必要があります。私はこれを行うには、次のコードを使用しました：

.sidebox { 
 
    border-style: solid; 
 
    width: 250px; 
 
    margin-bottom: 20px; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
} 
 
#tag { 
 
    background-color: black; 
 
    color: white; 
 
    display: inline; 
 
    padding: 5px; 
 
    margin: 3px; 
 
    text-decoration: none; 
 
}

<div class="sidebox"> 
 
    <h2>Popular Tags</h2> 
 
    <a href="" id="tag">Tag 1</a><a href="" id="tag">Tag 2</a><a href="" id="tag">Tag 3</a><a href="" id="tag">Tag 4</a><a href="" id="tag">Tag 5</a><a href="" id="tag">Tag 6</a><a href="" id="tag">Tag 7</a><a href="" id="tag">Tag 8</a> 
 
</div>

問題は、これらのタグは、div要素をオーバーフローということです。長いタグ行が1つ表示されます。タグをオーバーフローさせるのではなく、div内の次の行に移動させるにはどうすればよいですか？

私はoverflow: none;を使ってみましたが、すべてが重なり合っています。

Answer 1

inlineの代わりにinline-blockと表示します。

tagの場合は、IDの代わりにclassを使用する必要があります。要素がユニークの場合、IDを使用する必要があります。複数の要素でプロパティを使用する場合は、classを使用する必要があります。

.sidebox{ 
 
    border-style: solid; 
 
    width: 250px; 
 
    margin-bottom: 20px; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 

 
} 
 

 
.tag { 
 
    background-color: black; 
 
    color: white; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    margin: 3px; 
 
    text-decoration: none; 
 
}

<div class="sidebox"> 
 
    <h2>Popular Tags</h2> 
 
    <a href="" class="tag">Tag 1</a><a href="" class="tag">Tag 2</a><a href="" class="tag">Tag 3</a><a href="" class="tag">Tag 4</a><a href="" class="tag">Tag 5</a><a href="" class="tag">Tag 6</a><a href="" class="tag">Tag 7</a><a href="" class="tag">Tag 8</a> 
 
    </div>