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

Question

我有代码，如下所示。让文本不对齐（它影响其他li元素）有点烦人。我怎样才能使它成为固定宽度？我尝试过宽度= 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: block 100％宽度+填充+边框宽度）：

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;
}

希望这会有所帮助。如果我误解了您的问题或问题，请随时对我的回答发表评论，或者修改/编辑/澄清您的问题，我会尝试更有用。

Answer 2

我认为您需要为<ul>元素而不是<li>元素设置列表的宽度。如果列表包含在<div>内，您可以设置<div>的宽度而不是<ul>，我相信。

ul {
   width: 125px;
}

Answer 3

我不能完全理解你的语法，但我认为你想要的就是这个，对吗？

li.date
{
  background : url(/icons/date.png) no-repeat left top;
  width: 200px; /* or whatever */
}