Question

我有一个带有实线边框的div。在这个div中有多个'标签'，它们都应该包含在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。显示为一长串标签。如何让标签下到div中的下一行，而不是溢出？

我尝试过使用overflow: none;，但这会导致它们彼此重叠。

Answer 1

将其显示为inline-block而不是inline。

此外，您应为每个class使用ID代替tag。当元素唯一时，您必须使用ID。如果要在多个元素中使用属性，则必须使用class。

＆＃13;

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

＆＃13;

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

＆＃13;

如何阻止这些溢出div的内联元素？

1 个答案: