html - 列表剪切以新行结束

标签 html css

每次我的列表转到新的代码行时,我最终都会因为一些奇怪的原因而切断背景和边框的末端。

http://i.stack.imgur.com/zTpKx.png

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&nbsp;&nbsp;<span class="delete-button">&times;</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/

相关文章:

css - 使用样式表更改 RStudio 演示文稿的字体大小

html - 覆盖 vuetify 按钮文本颜色

javascript - HTML5 音频播放器可视化

html - 无法删除表格单元格中的空格

javascript - 将照片 slider 放入 Canvas 标签内

javascript - HTML5 Canvas - 空间从哪里出现?

javascript - 在函数之后用字符串转义jquery中的引号

javascript - 垂直滚动时如何防止未定义的 scrollLeft?

html - 隐藏单选按钮,同时保持其功能

javascript - 调整大小时 slider 全宽