Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как выровнять элементы в списке?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Rooner
Отправлено: 20 Июня, 2013 - 18:11:43
Post Id


Посетитель


Покинул форум
Сообщений всего: 291
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
Есть простой список ul li, где в li содержится маркер • и простая ссылка. Если ссылка длинная, то она переносится на следующую строчку, под данный маркер, а необходимо чтобы она переносилась под текст. На картинке слева так как сейчас, а справа как необходимо чтобы было. Подскажите как заверстать список чтобы получить результат справа?

(Добавление)
Уточню что стандартные списки не подходят из-за того, что у дочерних элементов например на 3 уровне вложенности должны быть 3 точки, а в обычных списках только 1.
 
 Top
esterio
Отправлено: 20 Июня, 2013 - 18:19:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
Натолктну только на
http://htmlbook[dot]ru/css/list-style
 
 Top
VenZell
Отправлено: 20 Июня, 2013 - 18:35:28
Post Id


Частый гость


Покинул форум
Сообщений всего: 237
Дата рег-ции: Июнь 2013  


Помог: 12 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. .super-menu{
  2.     padding: 0; /* Не нужно в рабочем примере */
  3.     margin: 0; /* Не нужно в рабочем примере */
  4.     list-style-type: none;
  5.     width: 200px;
  6. }
  7. .super-menu .marker{
  8.     display: table-cell;
  9.     padding-right: 5px;
  10. }
  11. .super-menu li a{
  12.     display: table-cell;
  13. }

CODE (html):
скопировать код в буфер обмена
  1. <ul class="super-menu">
  2.     <li><span class="marker">•</span><a href='#'>Some very-very long and strange link text placed here</a></li>
  3.     <li><span class="marker">•</span><a href='#'>Link #2</a></li>
  4.     <li><span class="marker">••</span><a href='#'>Link #3</a></li>
  5.     <li><span class="marker">•••</span><a href='#'>Link #4</a></li>
  6.     <li><span class="marker">•••</span><a href='#'>Some very-very long and strange link text placed here</a></li>
  7.     <li><span class="marker">•••</span><a href='#'>Link #5</a></li>
  8.     <li><span class="marker">•</span><a href='#'>Link #6</a></li>
  9.     <li><span class="marker">•</span><a href='#'>Link #7</a></li>
  10. </ul>

Или уже готовый пример для просмотра:
http://jsfiddle[dot]net/WUHg9/2/
Так? (добавил границы для наглядности)
p.s. под вечер голова не варит. Радость Наплодил, зачем-то, span'ов...

(Отредактировано автором: 20 Июня, 2013 - 18:55:12)

 
 Top
DelphinPRO
Отправлено: 20 Июня, 2013 - 18:57:18
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
VenZell мрак и ужас.

решаем либо фоновой картинкой и паддингом, либо псевдоэлементом before (абсолютное позиционирование) и маржин\паддинг для LI

upd
VenZell немного поправил, но все равно лишний элемент span, без которого можно (и нужно) обойтись

(Отредактировано автором: 20 Июня, 2013 - 18:58:49)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
VenZell
Отправлено: 20 Июня, 2013 - 19:02:16
Post Id


Частый гость


Покинул форум
Сообщений всего: 237
Дата рег-ции: Июнь 2013  


Помог: 12 раз(а)
DelphinPRO, я писал решение исходя из того, что маркер нужен именно текстом (иначе зачем его копировали в первое сообщение).
Не отрицаю, в CSS я не силен. Хотел помочь человеку. Единственное что я хочу уточнить: в упомянутом тобой примере учитывается, что:
"Rooner" пишет:
у дочерних элементов например на 3 уровне вложенности должны быть 3 точки, а в обычных списках только 1

?

(Отредактировано автором: 20 Июня, 2013 - 19:02:49)

 
 Top
DelphinPRO
Отправлено: 20 Июня, 2013 - 19:11:11
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
VenZell, ok покажу пример. Пример не идеальный, наколеночный, как и большинство моих ответов - только наталкивает на мысль

http://jsfiddle[dot]net/vFpNX/
(Добавление)
ps
fiddle глючит что ли... точки становится видно, только после нажатия на кнопку Run
http://delphinpro[dot]ru/s/screensho[dot][dot][dot]30620-201525[dot]jpg

(Отредактировано автором: 20 Июня, 2013 - 19:19:31)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
VenZell
Отправлено: 20 Июня, 2013 - 19:15:29
Post Id


Частый гость


Покинул форум
Сообщений всего: 237
Дата рег-ции: Июнь 2013  


Помог: 12 раз(а)
DelphinPRO, хм, а я вот такой пример пока накидать успел, почитав попутно о псевдоэлементах: http://jsfiddle[dot]net/WUHg9/3/.
Твою идею я тоже теперь понял.

(Отредактировано автором: 20 Июня, 2013 - 19:15:48)

 
 Top
DelphinPRO
Отправлено: 20 Июня, 2013 - 19:17:42
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
VenZell
ну да, суть та же, только классы опять же излишни. можно каскадом обойтись (как у меня). хотя наверное дело вкуса.

ps если для CMS верстать, то лучше обходится голыми списками

(Отредактировано автором: 20 Июня, 2013 - 19:18:11)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Rooner
Отправлено: 21 Июня, 2013 - 08:55:36
Post Id


Посетитель


Покинул форум
Сообщений всего: 291
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
DelphinPRO http://jsfiddle[dot]net/vFpNX/ phpStormy не нравятся стили в таком виде, хотя работает, отступы есть даже в IE7, но нету точек даже в норм браузерах
VenZell http://jsfiddle[dot]net/WUHg9/3/ в ie 7 не рисуются точки, и все отступы пропадают
VenZell http://jsfiddle[dot]net/WUHg9/2/ все отлично, хотя в IE7 длинные строки переносятся ПОД точку, но это не беда, точки видны везде, вобщем этот вариант мне подойдет больше

Выбранный вариант, также я добавил свойство float: left; маркерам, т.к. без него появляются косяки, если между точками есть пробелы, в они должны быть
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2.   .super-menu{
  3.     padding: 0; /* Не нужно в рабочем примере */
  4.     margin: 0; /* Не нужно в рабочем примере */
  5.     list-style-type: none;
  6.     width: 200px;
  7.   }
  8.   .super-menu .marker{
  9.     display: table-cell;
  10.     padding-right: 15px;
  11.     float: left;
  12.   }
  13.   .super-menu li a{
  14.     display: table-cell;
  15.   }
  16. </style>


CODE (html):
скопировать код в буфер обмена
  1. <ul class="super-menu">
  2.   <li><span class="marker">•</span><a href='#'>Some very-very long and strange link text placed here</a></li>
  3.   <li><span class="marker">•</span><a href='#'>Link #2</a></li>
  4.   <li><span class="marker">• •</span><a href='#'>Link #3</a></li>
  5.   <li><span class="marker">• • •</span><a href='#'>Link #4Link #4Link #4Link #4Link #4Link #4Link #4Link #4Link #4Link #4Link #4Link #4</a></li>
  6.   <li><span class="marker">• • •</span><a href='#'>Some very-very long and strange link text placed here</a></li>
  7.   <li><span class="marker">• • •</span><a href='#'>Link #5</a></li>
  8.   <li><span class="marker">•</span><a href='#'>Link #6</a></li>
  9.   <li><span class="marker">•</span><a href='#'>Link #7</a></li>
  10. </ul>


Спасибо за предложенные варианты, теперь на сайтах буду делать ровные списки Радость
 
 Top
DelphinPRO
Отправлено: 21 Июня, 2013 - 09:33:48
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
Rooner пишет:
DelphinPRO http://jsfiddle[dot]net/vFpNX/ phpStormy не нравятся стили в таком виде

phpStorm прекрасно понимает SASS.

Rooner пишет:
хотя работает, отступы есть даже в IE7, но нету точек даже в норм браузерах

а вот jsfiddle - не очень хорошо, видимо.

Переписал пример на нативный CSS - все точки и отступы на месте.
В IE не смотрел, но там настолько все примитивно-просто, что думаю заработает и в ослике.
(upd: хотя нет. в седьмом не будет точек, он же псевдо элементы не понимает. без хака не обойтись с таким вариантом)

http://jsfiddle[dot]net/XSLKC/1/

(Отредактировано автором: 21 Июня, 2013 - 09:39:42)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Rooner
Отправлено: 21 Июня, 2013 - 11:05:12
Post Id


Посетитель


Покинул форум
Сообщений всего: 291
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
DelphinPRO http://jsfiddle[dot]net/XSLKC/1/ этот вариант тоже хорош, хоть в IE 7 не рисуются точки не проблема, на то он и осел, спс за вариант буду иметь ввиду.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB