2010-01-16 1 views
4

Кнопки для голосования имеют только тег img, тег span и другой тег img. Когда я пробую их на новой странице, они выходят в одну строку. Какой элемент CSS точно вызывает их на разных линиях?Что делает кнопки голосования в StackOverflow в разных строках?

<img class="vote-up" width="40" height="25" title="This question is useful and clear (click again to undo)" alt="vote up" src="http://sstatic.net/so/img/vote-arrow-up.png"/> 
<span class="vote-count-post" title="View upvote and downvote totals" style="cursor: pointer;"> 0 </span> 
<img class="vote-down" width="40" height="25" title="This question is unclear or not useful (click again to undo)" alt="vote down" src="http://sstatic.net/so/img/vote-arrow-down.png"/> 

ответ

10

Они применяют display:block ко всем трем пунктам. Это важно, потому что img и span элементами являются inline по умолчанию, в отличие оти div теги, которые являются блоком элементов по умолчанию.

Элементы, которые являются display:block по умолчанию, занимают все пространство слева направо и сохраняют свою собственную линию, а также нажимают другие элементы на следующую строку. Даже если применяется ширина, которая ограничивает их размер, они все равно останутся на своей собственной линии, если вы не измените position на абсолютный или элемент.

2

display:block;

Элементы уровня блока являются те элементы исходного документа, которые отформатированные визуально в виде блоков (например, параграфы). Несколько значений свойство 'display' делает элемент уровень блока: 'block', 'list-item' и 'run-in' (часть времени, см. Обход ) и ' Таблица'.

Элементы уровня блока (для дисплея, за исключением элементов «таблицы», которые являются , описанной в следующей главе) генерируют основной бокс блока, который содержит либо только блочные коробки или только встроенные коробки. Основной блок-блок устанавливает блок-блок для ящиков-потомков и сгенерированный контент , а также поле, участвующее в любой схеме позиционирования . Основной блок коробки участвуют в блоке контекст форматирования.

http://www.w3.org/TR/CSS21/visuren.html

Смежные вопросы