Question

如何阻止这些按钮在换行到下一行时相互重叠？

＆＃13;

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

＆＃13;

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

＆＃13;

View on JSFiddle

Answer 1

按钮重叠，因为它们是"inline"个元素。内联元素上的垂直填充对周围元素没有影响。有关详细信息，请参阅this article on maxdesign.com。

防止重叠的一种方法是将每个按钮设置为display:inline-block 我还建议添加底部边距以在＆＃34;行＆＃34;。

之间创建一些空格

内联块：元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素） - display @ MDN

请记住，inline-block元素之间的空格将被尊重（显示）。如果额外的空间影响您的设计，您可能希望将其删除。一种方法是删除代码中元素之间的空格。在我的演示中，我已经将每个结束</a>移动到下一行，就在下一个开始<a>之前，以便在一个元素和下一个元素之间没有空格。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将float:left;和margin-top:2px;添加到课程.button-link

.button-link {
    background: #4479ba none repeat scroll 0 0;
    border: 1px solid #20538d;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 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);
    transition-duration: 0.2s;
    float:left;
    margin-top:2px;
}

Answer 3

使用display: inline-block和一些margin-top/margin-bottom。

.button-link {
    margin-top: 5px;
    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;
    moz-border-radius: 4px;
    moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    moz-transition-duration: 0.2s;
    moz-user-select: none;
    ms-user-select: none;
    padding: 10px 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    transition-duration: 0.2s;
    user-select: none;
    webkit-border-radius: 4px;
    webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    webkit-transition-duration: 0.2s;
    webkit-user-select: none;
    display: inline-block;
}

Fiddle

换行到下一行时元素重叠

3 个答案: