如何在CSS中设置列表的宽度

Question

我有代码，如下所示。文本不对齐有点烦人（它会影响其他li元素）。我怎样才能使它成为固定宽度？我尝试过 width=XYZpx 但没有任何作用。

<li class="date">2/28/2010 9:37:38 AM</li>
...
<li class="date">3/1/2010 9:37:38 AM</li>

CSS

li.date
{ 
  background : url(/icons/date.png) no-repeat left top;
}

Answer 1

假设以下 (x)html：

<div id="navigation">
  <ul>
    <li class="date">List item One</li>
    <li class="date">List item Two</li>
  </ul>
</div>

元素的宽度li可以通过设置 的宽度来设置div#navigation（因为ul和li将默认为display: block100% 宽度 + 填充 + 边框宽度）：

div#navigation {width: 200px; }

或者通过设置宽度ul

div#navigation > ul {width: 200px; }

或者通过设置元素本身的宽度li：

div#navigation > ul > li.date {width: 200px; }

我认为，除非您的问题中存在重大拼写错误，否则您将尝试错误地分配宽度，当然对于width=XYZpx您发布的宽度而言。要以这种方式分配宽度，您应该引用该值，因此它变为：

...width="XYZpx"...

但请记住，这是 html/xhtml，而不是 css。要使用 css 设置宽度，您应该使用：

...style="width: 200px;"...

如果您想使用内联样式，或者在样式表中，请使用以下形式（如上）：

element.selector {width: 200px; }

您对文本对齐的评论表明您的li元素可能继承了填充，或者从某处继承了文本缩进，因此您可能需要添加样式：

div#navigation > ul > li.date {
  text-indent: 0;
  padding: 0;
}

希望这可以帮助。如果我误解了您的问题或问题，请随时对我的答案发表评论，或修改/编辑/澄清您的问题，我会尽力变得更有用。