换行到下一行时元素重叠 [英] Elements overlap when wrapping to next line

问题描述

当这些按钮换行到下一行时，如何防止它们相互重叠?

How can I prevent these buttons from overlapping each other when they wrap to the next line?

.button-link {
  background: #4479BA;
  border: solid 1px #20538D;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #FFF;
  margin-right: 10px;
  padding: 10px 15px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Amazon</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Auction</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">LinkedIn</a>
<a target="_blank" class="button-link" href="#">Mediacom</a>
<a target="_blank" class="button-link" href="http://mediacomtoday.com/usagemeter/index.php">Mediacom Usuage</a>
<a target="_blank" class="button-link" href="http://stackoverflow.com/">Stackoverflow</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Twitter</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">BofA</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Wells Fargo</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Chase</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Citi</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Mint</a>

在JSFiddle上查看

推荐答案

按钮重叠是因为它们是内联" 元素.内联元素上的垂直填充对周围元素没有影响.有关更多信息，请参见这篇关于maxdesign.com的文章.

The buttons overlap because they are "inline" elements. Vertical padding on inline elements has no effect on surrounding elements. See this article on maxdesign.com for more information.

防止重叠的一种方法是将每个按钮设置为 display:inline-block .
我还建议添加底部边距以在行"之间创建一些空间.

One method of preventing the overlap is to set each button to display:inline-block.
I also recommend adding bottom margin to create some space between "rows".

Inline-Block:元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内嵌框一样(与被替换的元素非常相似)
-显示@ MDN

请记住，将尊重(显示) inline-block 元素之间的空白.如果多余的空间影响您的设计，则可能需要将其删除.一种方法是删除代码中元素之间的空间.在我的演示中，我已将每个结束的</a> 移至下一行，紧接在下一个开始的< a> 之前，因此，每个空格之间没有空格元素和下一个.

Keep in mind that white space between inline-block elements will be respected (displayed). If the extra space affects your design, you may want to remove it. One method is to remove space between the elements in your code. In my demonstration, I have moved each closing </a> to the next line, just before the next opening <a>, so that there's no space between one element and the next.

.button-link {
  background: #4479BA;
  border: solid 1px #20538D;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  color: #FFF;
  margin:0 10px 10px 0;
  padding: 10px 15px;
  display: inline-block;
}

<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Amazon
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Auction
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">LinkedIn
</a><a target="_blank" class="button-link" href="#">Mediacom
</a><a target="_blank" class="button-link" href="http://mediacomtoday.com/usagemeter/index.php">Mediacom Usuage
</a><a target="_blank" class="button-link" href="http://stackoverflow.com/">Stackoverflow
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Twitter
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">BofA
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Wells Fargo
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Chase
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Citi
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Mint</a>

这篇关于换行到下一行时元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！