Question

我无法让我的LI元素更靠近容器的左侧。我在下面有我的HTML，当它显示LI元素时，左边的边距约为30像素。我想知道如何在容器上进行冲洗，然后一旦我理解了这种技术，我就可以调整它以便有一些左边的填充。

顺便说一句，我确实创建了一个fiddle，以便更容易看到问题，但不幸的是jsFiddle显示了我想看到的结果！如果以下HTML被复制/粘贴到文件中并在Chrome中显示，则它看起来不同（每个LI都向右移动）。

这是HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        .parentSelectorBox
        {
        }
        .parentSelectorBox .fieldsBox
        {
            border: 1px solid blue;
            width: 250px;
            margin: 5px;
            float: left;
        }
        .parentSelectorBox .actionButtonsBox
        {
            border: 1px solid blue;
            width: 100px;
            margin: 5px;
            float: left;
        }
        .parentSelectorBox .availableFields
        {
            border: 1px solid pink;
            height: 100px;
            overflow: auto;
        }
        .parentSelectorBox ul li
        {
            height: 20px;
            list-style-type: none;
            margin: 0 10 0 -15px;
            padding: 0 10 0 -15px;
            white-space: nowrap;
            marker-offset: 105px;
        }
    </style>
</head>
<body>
    <div id="parentSelectorBox" class="parentSelectorBox">
        <div id="availableFieldsBox" class="fieldsBox">
            <div id="availableFields" class="availableFields">
                <ul>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                    <li>A</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

您需要删除padding的{{1}}属性：

ul

Answer 2

尝试从ul元素中删除填充。

ul{padding:0px;}

应该有效。您的问题不需要删除保证金！

PS：取消选中小提琴左侧的“规范化CSS” - 复选框以查看问题。

无法对齐LI元素

2 个答案: