这是我的代码:
<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
<ul id="ulCategoryMenu" name="ulCategoryMenu">
</ul>
</div>
列表是动态填充的。但有一个问题:
当列表填充在此 Div 内时，当我在上面的代码以及我用来动态填充它的代码中没有使用任何对齐属性时，默认情况下元素是居中对齐的。如何对齐以使元素看起来像这样:
alt text http://www.freeimagehosting.net/uploads/b0f0daf6a2.jpg
目前它以脏形式显示，如下所示:
alt text http://www.freeimagehosting.net/uploads/901540953d.jpg
**** 已编辑 ****
就我而言，这些元素实际上是标签而不是
**** 进一步编辑 ****
第一个图像的硬编码 HTML 的 CSS 代码如下所示:
<style type="text/css">
.urbangreymenu{
width: 200px; /*width of menu*/
}
.urbangreymenu .headerbar{
font: bold 12px Verdana;
color: white;
background:#006699 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E4F0F5;
display: block;
padding: 5px 0;
line-height: 12px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.urbangreymenu ul li a:visited{
color: black;
}
.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
.style14 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #006699; font-size: 11px;}
</style>
最佳答案
就像 RegDwight 所说，这是关于边距/填充而不是对齐。您必须添加the following style items到您的 UL 元素，以及您列表中的实际 LI 元素。
更新:实际上还需要做更多工作才能获得列表项之间的空白。请参阅下面的代码。
由于 LI 元素是生成的并且不存在于您的初始 HTML 代码中，因此您必须在 CSS 中将它们的样式定义为 UL 元素的子项。
更新:我必须对代码进行一些编辑，使其看起来与您的示例中完全相同。我已经粘贴了完整的新 HTML 和 CSS，现在应该没问题了。
<html><head>
<style type="text/css">
.urbanbluemenu{
width: 200px; /*width of menu*/
}
ul#ulCategoryMenu {
background-color: white;
margin: 0;
padding: 0;
list-style-type: none;
}
ul#ulCategoryMenu li {
background-color: #BCD2E6;
margin: 2px 0 2px 0;
padding: 0 0 0 10px;
}
</style>
</head>
<body>
<div class="urbanbluemenu" id="divCategoryMenu" name="divCategoryMenu">
<ul id="ulCategoryMenu" name="ulCategoryMenu">
<li><label>John</label></li>
<li><label>Bill</label></li>
</ul>
</div>
</body>
</html>
关于css - 接口(interface) <Div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2101770/