Html 锂元素排列困难_Html_Css

Html 锂元素排列困难

html css

Html 锂元素排列困难,html,css,Html,Css,我无法使我的LI元素更靠近其容器的左侧对齐。下面是我的HTML，当它显示LI元素时，左边有一个大约30像素的边距。我想看看我如何能使它与他们的容器齐平，然后一旦我了解了这个技术，我就可以调整它，使它有一些剩余的填充物顺便说一句，我确实用它创建了一个示例，以便更容易地看到问题，但不幸的是，JSFIDLE显示了我希望看到的结果！如果将下面的HTML复制/粘贴到一个文件中，并在Chrome中显示，则看起来会有所不同（每个LI都向右移动）这是HTML <!DOCTYPE html PUBLIC

我无法使我的LI元素更靠近其容器的左侧对齐。下面是我的HTML，当它显示LI元素时，左边有一个大约30像素的边距。我想看看我如何能使它与他们的容器齐平，然后一旦我了解了这个技术，我就可以调整它，使它有一些剩余的填充物

顺便说一句，我确实用它创建了一个示例，以便更容易地看到问题，但不幸的是，JSFIDLE显示了我希望看到的结果！如果将下面的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>


.parentSelectorBox
{
}
.parentSelectorBox.fieldsBox
{
边框：1px纯蓝色；
宽度：250px；
保证金：5px；
浮动：左；
}
.parentSelectorBox.Action按钮框
{
边框：1px纯蓝色；
宽度：100px；
保证金：5px；
浮动：左；
}
.parentSelectorBox.availableFields
{
边框：1px纯红；
高度：100px；
溢出：自动；
}
.parentSelectorBox ul li
{
高度：20px；
列表样式类型：无；
利润率：0.10-15像素；
填充：0 10 0-15像素；
空白：nowrap；
标记偏移量：105px；
}

A
A
A
A
A
A
A
A
A
A
A
A
A
A

您需要删除

ul

的

填充属性：
.parentSelectorBox ul {
    margin: 0;
    padding: 0
}

尝试从ul元素中移除填充物
ul{padding:0px;}

应该有用。对于您的问题，不需要删除边距
PS：取消选中小提琴左侧的“规范化CSS”-复选框以查看您的问题。
如果JSFIDLE显示的结果很好，那么我猜可能是代码中的其他内容……为li
及其所有祖先元素设置margin
和padding
为0
。此外，不能使用负填充@jsfiddle使用重置样式表删除默认样式。实际上，从ul
中删除边距是必要的。OP表示小提琴上显示的版本正是他想要的。如果不从ul
中删除页边距，则顶部将有一个页边距…好的，如果他想要从小提琴中获得准确的结果，他必须删除页边距。但他只是想让他的“LI元素更靠近容器的左侧对齐”，所以这并不是真的必要