CSS размещение текста - PullRequest
Новая
       16

CSS размещение текста

1 голос
/ 04 апреля 2010

Кто-нибудь знает, как я могу получить "Автор AUTHOR 3 апреля 2010 г. | 0 Комментариев" под заголовком новостных ссылок, БЕЗ того, что он не входит в класс А? Я хочу, чтобы он выглядел, читался и функционировал как: 

[IMAGE] HEADLINE
        Posted by AUTHOR on April 3rd, 2010 | 0 Comments

Все это в начальном поле поиска, затем пользователь может щелкнуть, и оно расширяется дальше. Я могу заставить его работать, если я добавлю его в тег A CLASS, но это проблема. Я не могу иметь это там.

РЕДАКТИРОВАТЬ: Забыл показать вам, ребята, что я сейчас пытаюсь создать с этим; http://www.notedls.com/demo

Ответы [ 2 ]

0 голосов
/ 04 апреля 2010

Я вижу, что у вас уже есть правило для целевого элемента div, содержащего дополнительный текст: его ul#acc1 > li > div и имеет отступ 65 пикселей, который в настоящее время равен размеру используемых вами изображений. Но вы можете легко увеличить его, чтобы получить больше отступов.

также вы, вероятно, захотите удалить спецификации 'width' из внутренних элементов <ul> и <li> - это все элементы уровня блока, которые по умолчанию расширяются до полной доступной им ширины. Указав для них точную ширину, вы замораживаете их размер и не позволяете им течь должным образом при изменении дисплея из-за различных размеров шрифта, экранов и т. Д. Также, если вы когда-нибудь измените ширину или отступы чего-либо (как я рекомендую выше), у вас будет все равно пересчитать всю ширину. По умолчанию width: auto вам не нужно беспокоиться об этих вещах.

0 голосов
/ 04 апреля 2010

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

Также вы можете попробовать HTML-элементы DL / DD / DT: 

<DL>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
</DL>

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

Проверьте их на DL , DD , DT и на сайте w3

...