How to set the width of a list, in css

Question

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

In what way does the text not align? Did you assign `width: XYZpx;` to `li.date`? I would think that would work fine for setting the list items to a fixed width. — Scott Cranfill, Mar 01 '10 at 21:51

David Thomas · Accepted Answer · 2016-02-01T11:22:01.020

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 understood correctly. Yes i didnt actually write = and use XYZ as my value. I wrote width: 2000px; in my css file as a test with no apparent changes. It appears i cant change the width of one li, i may need to change all or none. I tried using a div inside a li and wrote `li.date div { display: inline; border-color: Black; color:Red; border-style:solid; border-width:5px; padding 5,5,5,5; }` The pading and with did nothing (at least in FireFox). This code originally use a ul i think i should change it to use divs instead. — , Mar 02 '10 at 10:08

Gabe · Answer 2 · 2010-03-01T22:00:08.910

1

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

edited Mar 01 '10 at 22:00

answered Mar 01 '10 at 21:49

Gabe

49,577
28
142
181

score 0 · Answer 3 · answered Mar 01 '10 at 21:48

0

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 */
}

answered Mar 01 '10 at 21:48

Matchu

83,922
18
153
160

How to set the width of a list, in css

3 Answers3

Linked