CSS для перемещения текста на новую строку в горизонтальном меню

Question

CSS для перемещения текста на новую строку в горизонтальном меню

0

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

HTML:

<ul class="tabs">
<li>
    <div class="home">              
            Home            
    </div>
</li>
<li>
    <div class="contact">               
            How to
            Contact Us
    </div>
</li>
<li>
    <div class="products">              
            About Our
            Products
    </div>
</li>
</ul>

CSS:

.tabs ul {  
    list-style: none;
}

.tabs li {  
    display: inline-block;
}

Итак, что я пытаюсь сделать, а не появляться как о наших продуктах. Вместо этого:

О нашем

Продукты

Здесь моя скрипка: http://jsfiddle.net/oampz/dWbx5/

В идеале без использования br

Oam Psy 09 апр. 2014, в 10:46

Источник

0

вы не можете просто использовать <br />
Mike 09 апр. 2014, в 08:41
0

В идеале без использования <br>
Oam Psy 09 апр. 2014, в 08:42
0

хорошо, тогда вам придется заглянуть в макс-ширину, я думаю.
Mike 09 апр. 2014, в 08:44

Показать ещё 1 комментарий

Теги:

html

css

html5

css3

3 ответа

1

Просто используйте перерыв <br/>?

<div class="products">              
    About Our<br />Products
</div>

Я также предпочитаю использовать float: left; на ли вместо встроенного блока проще (и более логично) работать с:

http://jsfiddle.net/2EDbr/

davey 09 апр. 2014, в 07:09

0

вот обновленная скрипка: jsfiddle.net/webtiki/dWbx5/3
web-tiki 09 апр. 2014, в 08:42
0

Спасибо, в идеале без использования <br>
Oam Psy 09 апр. 2014, в 08:46
1

Если вы хотите использовать его без <br /> , поместите еще один <div> вокруг 'products' или задайте li фиксированной ширины, чтобы текст автоматически переходил на следующую строку.
davey 09 апр. 2014, в 08:48

Показать ещё 1 комментарий

0

    <div >              

        About Our
    </div>
<div>
     Products
</div>

Аналогично, вы можете использовать все

http://jsfiddle.net/dWbx5/4/

Rebecca 09 апр. 2014, в 06:41

Ещё вопросы

вы не можете просто использовать <br />
хорошо, тогда вам придется заглянуть в макс-ширину, я думаю.
вот обновленная скрипка: jsfiddle.net/webtiki/dWbx5/3
Спасибо, в идеале без использования <br>
Если вы хотите использовать его без <br /> , поместите еще один <div> вокруг 'products' или задайте li фиксированной ширины, чтобы текст автоматически переходил на следующую строку.

Mike · Accepted Answer · 2014-04-09T06-07-00.000Z

Так, как я сказал в комментарии, вы можете использовать max-width

ЗДЕСЬ - это скрипка, использующая его.

EDIT: я добавил его в встроенный CSS, но вы можете переместить его на страницу CSS.