[英]Trouble aligning LI element
我在使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>
您需要删除ul
的padding
属性:
.parentSelectorBox ul {
margin: 0;
padding: 0
}
尝试从ul元素中删除填充。
ul{padding:0px;}
应该管用。 对于您的问题,不必除去边距!
PS:取消选中小提琴左侧的“ Normalized CSS”复选框,以查看您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.