Как установить ширину списка, в css

Question

У меня есть код, как показано ниже. Немного раздражает, что текст не выравнивается (это влияет на другие элементы li). Как я могу сделать это с фиксированной шириной? Я пробовал width = 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% width + padding + border-widths ):

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