How to set the width of a list, in css
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 */
}
精彩评论