Как создать встроенный элемент в новой строке, или элемент блокировки не занимает всю строку?

Я не могу понять, как это сделать с помощью CSS. Если я просто использую тег <br>, он работает безупречно, но я стараюсь избегать этого по понятным причинам.

В принципе, я просто хочу, чтобы .feature_desc span начинался с новой строки, но:

  • Если я сделаю его встроенным элементом, он не будет иметь разрыв строки.
  • Если я сделаю его блочным элементом, он будет расширяться, чтобы соответствовать всей строке, помещая каждый из этих значков в свою линию и тратя тонны пространства на экран (каждый .feature_wrapper будет немного другого размера, но ни один из них никогда не будет таким широким, как весь экран.)

Пример кода: Это работает, но использует тег br:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

Я хочу, чтобы стиль с CSS для достижения того же результата:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

Любые идеи? Или я об этом ошибаюсь?

Ответы

Ответ 1

Вы можете дать ему блок отображения свойств; поэтому он будет вести себя как div и иметь собственную строку

CSS

.feature_desc {
   display: block;
   ....
}

Ответ 2

Даже если вопрос довольно нечеткий, и фрагмент HTML довольно ограничен, я полагаю,

.feature_desc {
    display: block;
}
.feature_desc:before {
    content: "";
    display: block;
}

может дать вам желание, которого вы хотите достичь без элемента <br/>. Хотя это поможет увидеть, как ваш CSS применяется к этим элементам.

Примечание. Однако приведенный выше пример не работает в IE7.

Ответ 3

Я думаю, что поплавки могут работать лучше всего для вас здесь, если вы не хотите, чтобы элемент занимал всю строку, float it left должен работать.

.feature_wrapper span {
    float: left;
    clear: left;
    display:inline
}

EDIT: теперь браузеры имеют лучшую поддержку, вы можете использовать встроенный блок.

.feature_wrapper span {
    display:inline-block;
    *display:inline; *zoom:1;
}

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

Ответ 4

Для элемента блока не занимать всю строку, установите его ширину на что-то маленькое, а white-space:nowrap

label
{
    width:10px;
    display:block;
    white-space:nowrap;
}