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; padding:0; }

您也可以尝试在display:block css中添加li。

编辑（感谢elclanrs）：UL和LI都是块级元素。这只是ul上的边距/填充，这是罪魁祸首。

Answer 2

ul#list{
    margin:0;
    padding:0;   
}

FIDDLE EXAMPLE