每次我的列表转到新的代码行时,我最终都会因为一些奇怪的原因而切断背景和边框的末端。
li.list {
display: inline;
line-height: 30px;
width: inherit;
font-family: 'Lato', sans-serif;
color: #8e8d8d;
background-color: rgba(204,204,204,0.5);
margin: 5px; margin-top: 10px; margin-bottom: 10px;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom: 1px solid #CCC; border-right: 1px solid #CCC;
}
<li class="list"><span>Timmy Smith <span class="delete-button">×</span></span></li>
在单个 li 上一切正常,但是当列表需要跳到下一行以适应容器的宽度时,它会切断 li 的末尾。
我做错了什么??
编辑:根据要求,这里还有一个 jsfiddle。 http://jsfiddle.net/DannLea/t6gxg29o/
最佳答案
尝试使用 display: inline-block
而不是 display:inline
工作 DEMO
它破坏了边距,但您可以轻松修复。
否则,在 inline
元素上使用 padding 和 margins 是行不通的。
关于html - 列表剪切以新行结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32612719/