Wie kann ich diese Inline-Elemente stoppen, die div überlaufen?

Question

Ich habe ein div mit einer festen Grenze. Innerhalb dieses div befinden sich mehrere 'Tags', die alle innerhalb der Grenze des div enthalten sein sollten. Ich habe den folgenden Code verwendet, dies zu tun:

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

Das Problem ist, dass diese Tags, um die div überlaufen. Es wird als eine lange Reihe von Tags angezeigt. Wie kann ich Tags in die nächste Zeile im div verschieben, anstatt sie zu überfließen?

Ich habe versucht mit overflow: none;, aber dies bewirkt, dass sie sich gegenseitig überlappen.

Answer 1

Zeigen Sie sie als inline-block anstelle von inline an.

Sie sollten auch einen class anstelle von ID für jeden tag verwenden. Sie müssen ID verwenden, wenn die Elemente einmalig sind. Sie müssen class verwenden, wenn Sie eine Eigenschaft in mehr als einem Element verwenden möchten.

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