LI对齐问题

Question

I am having trouble getting my LI elements to align closer to the left side of their container. 我在使LI元素更靠近容器左侧对齐时遇到麻烦。 I have my HTML below, and when it displays the LI elements have a margin on the left of about 30 pixels. 我在下面有我的HTML，当它显示LI元素时，其左边距约为30像素。 I would like to see how I could make that flush against their container, and then once I understand that technique, I can adjust it so there is some left padding. 我想看看如何使它与容器齐平，然后，一旦我理解了该技术，就可以对其进行调整，以便保留一些空白。

Btw, I did create a fiddle with this to make it easier to see the problem, but unfortunately jsFiddle shows the result I want to see! 顺便说一句，我确实为此创建了一个小提琴，以使其更容易看到问题，但是不幸的是jsFiddle显示了我想要看到的结果！ If the below HTML is copied/pasted to a file and brought up in Chrome, it looks different (each LI is shifted to the right). 如果将以下HTML复制/粘贴到文件中并在Chrome中调出，则它看起来会有所不同（每个LI移到右侧）。

Here is the HTML... 这是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

You need to remove the padding property of the ul : 您需要删除ul的padding属性：

.parentSelectorBox ul {
    margin: 0;
    padding: 0
}

Answer 2

Try to remove the padding from the ul-element. 尝试从ul元素中删除填充。

ul{padding:0px;}

Should work. 应该管用。 Removing the margin is not necessary for your problem! 对于您的问题，不必除去边距！

PS: Uncheck the "Normalized CSS"-checkbox on the left side of the fiddle to see your problem. PS：取消选中小提琴左侧的“ Normalized CSS”复选框，以查看您的问题。

LI对齐问题

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-02-18 22:51:42

解决方案2
1 2012-02-18 22:53:28

LI对齐问题

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-02-18 22:51:42

解决方案2 1 2012-02-18 22:53:28

解决方案1
1 已采纳 2012-02-18 22:51:42

解决方案2
1 2012-02-18 22:53:28