开发者

How to set the width of a list, in css

开发者 https://www.devze.com 2022-12-22 01:47 出处:网络
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.

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="da开发者_JS百科te">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.


I think you need to set the width of the list for the <ul> element instead of the <li> element. If the list is contained inside of a <div>, you could set the width of the <div> instead of the <ul>, I believe.

ul {
   width: 125px;
}


I can't quite work through your grammar, but I think all you want is this, right?

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

精彩评论

暂无评论...
验证码 换一张
取 消