javascript - li 元素占据屏幕的整个宽度

Question

我正在制作一个简单的移动网站。在其中的一部分，我有一个无序列表。

<ul id="list" class="sortable"></ul>

遵循这些 css 规则:

.sortable,li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    li {

        list-style: none;
        border: 1px solid #CCC;
        background: #F6F6F6;
        color: #1C94C4;
        margin: 5px;
        padding: 5px;
        height: 22px;
    }
    li.sortable-placeholder {
        border: 1px dashed #CCC;
        background: none;
    }

li 元素是通过 javaScript 动态添加的。我遇到的问题是输出没有覆盖整个屏幕宽度。开头有很多空间，如屏幕截图所示:

怎么了？我应该怎么办？我该如何解决这个问题？

Answer 1

试试这个:

使包含该 li 的 ul 没有边距或填充。

#list { margin :0;填充:0； }

您还可以尝试将 display:block 添加到您的 li css。

编辑(感谢 elclanrs):UL 和 LI 都是 block 级元素。这只是你在 ul 上的边距/填充是罪魁祸首。