换行符会切断内联元素边框

Question

我有一个带有填充和边框的内联元素列表。当一个元素换行时，前一行的最后一个元素的边界被截断。

HTML：

<div class="multi-select">
  <div class="selected-list">
    <span class="selected-item">aankoop;boodschap;koop <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">accessoire <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">afmeting <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">aantal;tal <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">accu;batterij <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">afwerking <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">adapter <span class="remove-choice fa fa-close"></span></span>
    <span class="selected-item">one more item to make this stuff wrap <span class="remove-choice fa fa-close"></span></span>
  </div>
</div>

的CSS：

.selected-list {
  border: 1px #cacaca solid;
  padding: 0.5rem;
  min-height: 3.4375rem;
  line-height: calc(2.4375rem - 2px);
  margin-bottom: 1rem;
}

.selected-item {
  padding: 0.5rem;
  background-color: rgb(240, 240, 255);
  border-radius: 0.2rem;
  border: 1px blue solid;
  white-space: nowrap;
}

.remove-choice {
  cursor: pointer;
  color: blue;
}

https://jsfiddle.net/346wdoyw/1/

为什么会这样？我该如何解决？

Answer 1

  

为什么会这样？

<span>标记默认为display:inline，它会像纯文本一样呈现为句子。

  

我该如何解决？

将其设置为display:inline-block，它更像是block，还有inline，它显示为句子的基础。它还正确尊重width / height，padding / margin。

您可以使用/不使用white-space:nowrap进行更多测试，以更清楚地查看差异。

.selected-item {
  display: inline-block;
  ...
}

<强> jsFiddle

Answer 2

请尝试以下代码：

.selected-item {
    display: inline-block;
    vertical-align: top;
    padding: 0.1rem; // modify this as per your needs..
    margin: 0 5px 5px 0; // modify this as per your needs..
}