Trouble aligning LI element
Question
I am having trouble getting my LI elements to align closer to the left side of their container. I have my HTML below, and when it displays the LI elements have a margin on the left of about 30 pixels. 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! 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).
Here is the 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>
2 answers
solution1
1 ACCPTED 2012-02-18 22:51:42
You need to remove the padding property of the ul :
.parentSelectorBox ul {
margin: 0;
padding: 0
}
solution2
1 2012-02-18 22:53:28
Try to remove the padding from the ul-element.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.