列表剪切以新行

Question

每次我的列表转到新的代码行时，我最终都会得到背景的结束＆amp;边界被切断了一些奇怪的原因。

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/

Answer 1

尝试使用display: inline-block代替display:inline

工作DEMO

它会打破边距，但这可以轻松解决。

否则，在inline元素上使用填充和边距不起作用。