如何设置列表的宽度，在css中 [英] How to set the width of a list, in css

问题描述

我有代码，如下。这是有点恼人的文本不对齐（它影响其他 li 元素）。如何使它成为固定宽度？

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

解决方案

html：

 < div id =navigation> 
< ul> 
< li class =date>列表项一个< / li> 
< li class =date>列表项两个< / li> 
< / ul> 
< / div> 
  

li 元素的宽度通过设置 div＃navigation （如 ul 和 li 默认为 display：block ，宽度为100％+ padding + border-width）：

  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; 
} 
  
希望这有帮助。如果我误解了您的问题或问题，请随时对我的回答发表评论，或修改/编辑/澄清您的问题，我会尽量做得更有用。
 
I have the code, as below. It's a bit annoying to have the text not align (it affects other li elements). How can I make it a fixed-width? I've tried width=XYZpx but that did nothing.
<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;
}

解决方案
Assuming the following (x)html:
<div id="navigation">
  <ul>
    <li class="date">List item One</li>
    <li class="date">List item Two</li>
  </ul>
</div>
The width of the li elements can be set by either setting the width of the div#navigation (as the ul and li will default to display: block at 100% width + padding + border-widths):
div#navigation {width: 200px; }
Or by setting the width of the ul
div#navigation > ul {width: 200px; }
Or by setting the width of the li elements themselves:
div#navigation > ul > li.date {width: 200px; }
I think, unless there was a major typo in your question, that you're trying to assign the width incorrectly, certainly as regards the width=XYZpx that you posted. To assign the width this way you should quote the value, so it becomes:
...width="XYZpx"...
But bear in mind that this is html/xhtml, not css. To set the width with css you should use either:
...style="width: 200px;"...
If you want to use inline-styles, or, in the stylesheet, use the form (as above):
element.selector {width: 200px; }
Your comments regarding the text's alignment suggests that your li elements are perhaps inheriting padding, or a text-indent from somewhere, so you might want to add the styles:
div#navigation > ul > li.date {
  text-indent: 0;
  padding: 0;
}
Hope this helps. If I've misunderstood your question, or problem, please feel free to drop a comment to my answer, or revise/edit/clarify your question, and I'll try to be more useful.

                        
这篇关于如何设置列表的宽度，在css中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！