Обтекание между лентами

У меня есть список ссылок, которые должны отображаться в строке. Дело в том, что я не хочу, чтобы текст обернулся в середине ссылок. Если это необходимо для обертывания, это должно быть сделано только между ссылок.Обтекание между лентами

У меня поэтому добавлено свойство white-space:nowrap; к моей ссылке. Но в результате список ссылок никогда обертывания и выходит из моего div окно.

Любая идея, как я могу получить свой список, чтобы обернуть между ссылками? Спасибо!

<div class="box"> 
<p> 
<a href="mylink1" class="mytag">Hello there</a> 
<a href="mylink2" class="mytag">Hello you</a> 
<a href="mylink3" class="mytag">Hello people</a> 
<a href="mylink4" class="mytag">Hello world</a> 
</p> 
</div>

Соответствующий CSS просто:

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    white-space:nowrap; 
} 
.mytag:hover{ 
    background-color:#FFE5B5; 
}

источник

2012-05-11 David

Вы правы, я не знал этого процента – David

В принципе, white-space:nowrap; делает то, что предполагается, и не разбивает элементы на несколько строк.

Что вы на самом деле ищете, так это отображать ссылки на одной строке, без ссылок на следующую строку. Поэтому используйте свойство display как inline-block.

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    display: inline-block; 
}

источник

2012-05-11 20:53:48 Starx

'' * is * встроенный элемент – Madbreaks

@Madbreaks, попробуйте с помощью 'inline-block', он не переносится на несколько строк. :) – Starx

Он отлично работает с 'inline-block', спасибо! Я надеюсь, что это свойство совместимо со всеми часто используемыми браузерами :) – David

Существует нет ничего таинственного здесь - они должны автоматически обернуть между ссылками, если ваш контейнер имеет специфический widhth: http://jsfiddle.net/RZfd2/

источник

2012-05-11 20:47:29 Madbreaks

Я не хочу иметь обертывания между всеми ссылками. Только для того, чтобы мой список стал слишком широким. Так что _authorized_ обернуть между ссылками, но не _forced_ в – David

@ Эрик, то, что вы описываете, именно то, что происходит в jsfiddle. Вы должны быть более конкретными в отношении проблемы, которую вы наблюдали: на каком браузере (-ах), в каком контексте, пожалуйста, предоставьте полную страницу, демонстрирующую проблему. Код, который вы предоставляете, не делает этого, кроме как в том смысле, что в Firefox обертка не выполняется, так как у нее есть некоторые ошибки при обертке в узких окнах. –

ответ

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