LI對齊問題

Question

我在使LI元素更靠近容器左側對齊時遇到麻煩。 我在下面有我的HTML，當它顯示LI元素時，其左邊距約為30像素。 我想看看如何使它與容器齊平，然后，一旦我理解了該技術，就可以對其進行調整，以便保留一些空白。

順便說一句，我確實為此創建了一個小提琴，以使其更容易看到問題，但是不幸的是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

您需要刪除ul的padding屬性：

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

Answer 2

嘗試從ul元素中刪除填充。

ul{padding:0px;}

應該管用。 對於您的問題，不必除去邊距！

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