Центрировать неупорядоченный список в таблице

#css #html-lists

#css #html-списки

Вопрос:

У меня есть код, подобный этому:

 <table>
  <tr>
    <td align="center">
      <ul>
        <li style="float:left;display:inline">Some text</li>
        <li style="float:left;display:inline">Other text</li>
      </ul>
    </td>
  </tr>
</table>

Проблема в том, что ширина UL равна 100%, а затем все UL выровнены по левому краю. Как я могу центрировать содержимое в UL? У меня должен быть этот стиль для LI, поэтому мне нужен UL с подгонкой под содержимое.

Ответ №1:

Просто удалите это "float:left" из вашего li-кода, потому что "display:inline" он сам выполняет за вас ту работу, с которой вы хотите "float:left" .

1. У тега LI также есть фон изображения, и единственный способ заставить этот фон работать — использовать float:left;

2. Вы имеете в виду, что без использования «float: left» фоновые изображения не могут отображаться в «li»? Насколько мне известно, это прекрасно работает и без использования символов float . И в вашем требовании, если вы не удалите это «float: left», то я думаю, что это не может быть достигнуто.

3. «display: inline» удаляет маркер для меня

Ответ №2:

margin:auto Стиль на <table> должен работать. И вам не нужно align="center" на <td> . Попробуйте это:

 <table style="margin:auto">
    <tr>
        <td>
            <ul>
                <li style="float:left;display:inline">Some text</li>
                <li style="float:left;display:inline">Other text</li>
            </ul>
        </td>
    </tr>
</table>

Ответ №3:

Вы могли бы попробовать применить display:inline к ul вместо li.

По какой причине вы все равно применяете его к li? Это кажется ненужным, потому что они перемещаются, но, возможно, есть другая причина.