HTML List только в первой строке

Question

Я пытаюсь достичь чего-то, что, как я думал, было легко, но реальность жестока. У меня есть простой список

• пункт 1
• пункт 2

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

Answer 1

Вы можете сделать это на своем CSS, указав маркер внутри списка:

Как это

ul{
    list-style: disc inside none;
}

Вы можете проверить это здесь

Answer 2

Попробуйте list-style-position: inside; для элемента <li>. Подробнее http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position.

Answer 3

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

Самое простое решение - не использовать встроенные маркеры элемента списка.

Вместо этого создайте изображение маркера, который выкак и использовать float: left, чтобы оно было вверху слева.Текст будет обернут вокруг него и даст желаемый результат.

<style>
    li { list-style-type:none; }
    img{ float:left; }
</style>
<ul>
    <li><img src='bullet'>my short text</li>
    <li><img src='bullet'>my very very long text</li>
</ul>

Некоторые другие моменты: поскольку разные браузеры различаются по отступам и полям списков, вы должны установить их: (Установите желаемое поле):

ul { padding:0; margin:30px }
ul li{ padding:0; margin:0 } 

Кроме того, лучше использовать элемент с фоном, который является вашей предпочтительной пулей:

span.bullet {float:left; height:10px; width:10px; background:url(bullet.gif) no-repeat}

Наконец, еще лучшая идея не использовать изображение ввсе - но вместо этого префикс всего текста с маркером Unicode.Или, если ваши пользователи используют современный браузер, добавьте символ unicode с помощью CSS.Тем не менее, у меня нет времени, чтобы посмотреть это.Прапс позже сегодня.

Answer 4

Попробуйте обернуть содержимое списка в div: