与文本一致的链接答案

【问题标题】：Links in line with text与文本一致的链接
【发布时间】：2013-12-05 14:50:34
【问题描述】：

谁能告诉我如何使用 html 和 css 在我的菜单中添加与五个链接一致的文本？

当前代码是

<div class="menu content">
    <ul id="nav">
        <h1>JEWLLERY</h1>   
        <li><a href="">Home</a>
        </li>
        <li><a href="">Jewellery</a>
        </li>
        <li><a href="">Locations</a>
        </li>
        <li><a href="">Contact Us</a>
        </li>
        <li><a href="">Reviews</a>
        </li>
    </ul>
</div>
<!-- end of menu -->

我希望“JEWELLEY”在左侧，下面有链接，谢谢。

内容位于我网站顶部的菜单栏中。

我希望菜单显示为

JEWELLERY HOME 珠宝位置联系我们评论

但目前链接（家庭、珠宝、位置、联系我们、评论）显示在“珠宝”下方

谢谢。

【问题讨论】：

请详细说明。目前尚不清楚您要达到的目标。还有@CTravel，我想说如果有另一个同样优雅的解决方案最好避免浮动（列表中很简单display: inline-block。

标签： html css text hyperlink inline

【解决方案1】：

试试display属性

h1, li{
    display:inline-block;
}

Fiddle Demo

另一个场景在此，您必须从<ul>中挑选出<h1>JEWLLERY</h1>

h1{
    float:left; // can be replaced by display:inline-block; and vertical-align:top;
}
ul{
   display:inline-block;
}

更新演示 --> http://jsfiddle.net/U2PPu/1/

注意：我同时使用display:inline-block 和float:left 属性只是为了让您熟悉这两个规则，否则display:inline-block 就足够了。

【讨论】：

【解决方案2】：

#nav
{
    list-style:none;
}
#nav li
{
    float:left;
}

【讨论】：