Выравнивание неупорядоченного списка "символ" - PullRequest
Новая
       3

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

3 голосов
/ 13 сентября 2011

Вы можете проверить проблему здесь: http://jsfiddle.net/gkJAd/4/

У меня есть неупорядоченный список, в котором каждый li будет иметь максимальную высоту 2,25em (я хочу, чтобы это было вбольшинство 2 строки).Тип списка должен нормально отображаться снаружи, выровненный по первой строке.Я перепробовал несколько вещей с проблемами:

  • Если я добавлю скрытые, высоту и т. Д. Коды в li вместо a диск исчезает;
  • Если я изменю a на display: block вместо display: inline-block, он будет отображаться корректно в Firefox, но неверно везде;
  • ЕслиЯ изменяю a на display: inline, он помещает диск в нужное место, но, поскольку он больше не является блоком, высота игнорируется.У кого-нибудь есть решение?

Sol

Ответы [ 3 ]

2 голосов
/ 13 сентября 2011

Я думаю, это то, что вы хотите.

По сути, я плавал, а затем очистил li с.

Затем я дал ul li a s display:inline-block и height и убедился, что использовал vertical-align:top;

ul{
    margin: 5px 10px 5px 20px; 
    background:green; 
    height:250px;
}

ul li{
    list-style-type:disc;
    float:left;
    clear:both;
} 

ul li a{
    background:green; 
    line-height:1.25em; 
    overflow: hidden;
    display:inline-block;
    height:2.25em;
    vertical-align:top;
}

Пример: http://jsfiddle.net/jasongennaro/gkJAd/6/

Проверено и работает в Chrome и FF

2 голосов
/ 13 сентября 2011

Все, что вам нужно сделать, это добавить vertical-align: top к вашему ul li a коду выбора.

Обновлено JSFiddle . Работа в FF, Chrome и IE8 / 9.

0 голосов
/ 13 сентября 2011

Я немного поиграл с этим, но в основном все сводится к тому, что overflow: hidden также будет скрывать маркеры списка. Вот что я придумал: http://jsfiddle.net/N3JGg/

В основном использовался тип дисплея list-item, затем вместо объявления дисков снаружи вытащил их в коробку с внутренней стороной, чтобы переполнение не скрывало их. Она не дает вам той же прекрасной линии, которую вы имели раньше, но у вас есть маркеры, отображаемые сейчас.

...