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

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;
}

所以，我想做的是，不是显示为关于我们的产品..而是:

关于我们

产品

这是我的 fiddle :http://jsfiddle.net/oampz/dWbx5/

理想情况下不使用 br

Answer 1

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

HERE是一个使用它的 fiddle 。

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