Выравнивание текста элемента неупорядоченного списка

Мне интересно, есть ли способ сделать так, чтобы текст элемента неупорядоченного списка отображался как «столбец» рядом со стандартным значком элемента списка дисков/точек? Сделал пару скринов:

Вот как это выглядит при использовании стандартного ненумерованного списка с некоторым текстом внутри элемента списка (li):

введите здесь описание изображения

И вот как я хочу, чтобы это выглядело:

введите здесь описание изображения

Возможно ли это без каких-либо взломов изображений / div? ;-) Я поискал, есть ли для него какие-либо стандартные настройки CSS, но не нашел.

Заранее большое спасибо!

Всего наилучшего,

Bo


html css text-alignment html-lists
person bomortensen    schedule 04.07.2012    source источник
comment
Эй, теперь проверьте это, я думаю, вам нужен этот tinkerbin.com/8DhTi5M2   -  person Rohit Azad Malik    schedule 04.07.2012
comment
ох!! У меня была эта настройка на моем ul: list-style-position:inside; Удаление, которое имело значение ;-)   -  person bomortensen    schedule 04.07.2012

Ответы (5)


arrow_upward
4
arrow_downward

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

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}
person Rohit Azad Malik    schedule 04.07.2012
comment
Спасибо, Рохит, я нашел недостаток в своем css (извините, что не поделился им, из первых рук) - см. Мой комментарий к моему сообщению ;-) Между прочим, добавление ширины в li - отличная идея. Спасибо еще раз! :-) - person bomortensen; 04.07.2012

arrow_upward
8
arrow_downward

list-style-position это недвижимость, которую вы ищете. Он работает во всех браузерах. (подробнее см. MDN)

ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}

Но на самом деле outside это значение по умолчанию. Вероятно, вы перезаписали его где-то в другом месте.

person KevinH    schedule 18.02.2016
comment
Я думаю, что это лучшее решение, так как нет необходимости задавать фиксированную ширину элементам, что в большинстве случаев невозможно в любом случае. - person laurent; 13.11.2017

arrow_upward
3
arrow_downward

Я думаю, что плавающие элементы списка слева - лучшее решение, чтобы они отображались в виде столбцов.

Этот код CSS может помочь вам:

<style type="text/css">
    ul > li {
        margin: 0 10px;
        width: 150px;
        float: left;
    }
</style>
person Community    schedule 04.07.2012

arrow_upward
0
arrow_downward

Достаточно использовать текстовое окружение с открытым(‹li›) и закрытым(‹/li›) тегами под тегом ‹ul›.

Например,

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
    <li>This is list item - 2</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
    <li>This is list item - 4</li>
</ul>

Выход будет,

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.
  • Это пункт списка - 2
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum
  • Это пункт списка - 4
person Sakthivel    schedule 18.02.2016

arrow_upward
-1
arrow_downward

Добавь это

ul {
  display:inline-block;
}

к вашему css-коду.

person paddotk    schedule 04.07.2012