Question

我有一个简单的水平菜单。在某些菜单标题上，我想拆分它们，以便文本从一个新行开始。

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

Answer 1

只需使用休息<br />？

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

我也更喜欢在li上使用float: left;而不是内联块，它更容易使用（和更多逻辑）：

http://jsfiddle.net/2EDbr/

Answer 2

就像我在评论中所说，你可以使用max-width

HERE是使用它的小提琴。

编辑：我将其添加到内联CSS中，但您可以将其移到CSS页面中。

Answer 3

    <div >              

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

同样你可以用于所有

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

CSS将文本移动到水平菜单上的新行

3 个答案: