Какой атрибут CSS, если таковой имеется, будет управлять этим?

Question

У меня есть следующий список:

альтернативный текст http://img210.imageshack.us/img210/2912/12922833.jpg

Как я могу заставить текст четвертого элемента обернуться, но сделать отступ на том же уровне, что и остальная часть списка? Есть какой-то атрибут CSS, который контролирует это?

Answer 1

попробуй list-style-position:

li {
  list-style-position: outside;
}

Как помнил ricebowl , вам может потребоваться увеличить левое поле или отступ, чтобы точки маркера оставались на месте, поскольку вместо точек маркера, находящихся внутри <li>, они теперь находится снаружи.

Answer 2

не знаю, о чем вы спрашиваете, я полагаю, вы хотите, чтобы это выглядело так, как если бы оно было выше. Потому что по умолчанию это не должно выглядеть так.

Пример кода ниже сделает изображение похожим на ваше изображение:

<style type="text/css">
    ul {
        width: 200px;
        padding: 0px;
        margin: 0px;
    }
    ul li {
        padding-left: 5px;
        text-indent: 20px;
    }
</style>

<ul>
    <li>text</li>
    <li>text text text text text text text text text text text text text text text text text text </li>
    <li>text </li>
</ul>

и этот код будет выглядеть так, как вы просите:

<style type="text/css">
    ul {
        width: 200px;
    }
</style>

<ul>
    <li>text</li>
    <li>text text text text text text text text text text text text text text text text text text </li>
    <li>text</li>
</ul>

Answer 3

Если это реальный список, это должно быть по умолчанию, но все равно делайте так, как говорит Хенрик.

Если это не настоящий список, и вы просто вставляете туда изображение пули ... тогда ... Ну, это немного сложнее. В идеале вы должны использовать правильный список (<ul><li>list item</li></ul>)

Если это изображение пули, вы можете использовать отступы и абсолютное позиционирование. Если для маркера используется HTML-символ, вы набиты.

Answer 4

 ul li { padding-left: 25px; }