Question

这是我的代码：

<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
  <ul id="ulCategoryMenu" name="ulCategoryMenu">

  </ul>
</div>

列表是动态填充的。但是有一个问题：

当列表填入此Div内部时，默认情况下，当我在上面的代码中没有使用任何align属性时，以及我用来动态填充它的代码时，这些项目是居中对齐的。如何对齐以便项目显示如下：

alt text http://www.freeimagehosting.net/uploads/b0f0daf6a2.jpg

目前，它以脏的形式显示：

alt text http://www.freeimagehosting.net/uploads/901540953d.jpg

****编辑****

就我而言，这些项目实际上是标签

。其次，要包含哪些CSS以使其看起来像第一张图像。

****进一步编辑****

第一张图片的硬编码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>

Answer 1

从屏幕截图中我会说项目不是居中对齐，而是从左侧偏移。

尝试降低margin-left的{{1}} / padding-left。作为一个简单的例子，尝试：

#ulCategoryMenu

您可能还需要减少<ul id="ulCategoryMenu" name="ulCategoryMenu" style="margin-left:0;padding-left:0">的左侧填充，具体取决于之前应用的CSS规则。

另请参阅Listamatic以获得更多灵感。

Answer 2

为你的li元素设置边距为0，左边有一个填充左边和一个行高（可能是20px）。默认情况下，li有左边距/左边距（取决于导航器）。

（行高如果li彼此更加分开。填充顶部和底部也可以工作。）

Answer 3

尝试一下，看看它是否适合你：

<div id="divCategoryMenu" name="divCategoryMenu" style="background-color:#BCD2E6;">
  <ul id="ulCategoryMenu" name="ulCategoryMenu" style="list-style:none;padding-left:-2px;margin-left-2px;">
    <li>Zilla Parishad</li>
    <li>Nagar Parishad</li>
    <li>Taluka Panchayat</li>
    <li>Gram Panchayat</li>
  </ul>
</div>

如果您的<li>元素是<label>元素，请确保它们已正确包装在<li>标记中。

编辑：当然，一旦你得到了正确的风格，你应该将样式移动到样式表。

上面的代码应该为您提供一个没有项目符号的列表，并将列表略微向左拉。

Answer 4

建议为列表和列表项分配填充和边距。原因有两个：1，边距和填充的默认设置通常对于可导航列表是不希望的。 2，Firefox和IE处理它们的间距不同，即Firefox使用填充，IE边距（反之亦然，不记得），因此它们都必须被覆盖，以便最终产品在两个浏览器中看起来都一样。

此外，ol或ul的内容必须为li。如果您有其他元素，则必须将它们包装在li元素中。

Answer 5

像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>

Answer 6

您是否检查过生成的实际HTML？

然后CSS应用于它？

连接<div> </div>

6 个答案: