符合文字的链接

Question

有人可以告诉我如何使用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”位于左侧，后面带有链接，谢谢。

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

我希望菜单显示为

珠宝主页珠宝位置联系我们评论

但是，当前的链接（房屋，珠宝，位置，联系我们，评论）显示在“珠宝首饰”下方

谢谢。

Answer 1

尝试display属性

h1, li{
    display:inline-block;
}

小提琴演示

另一个场景在这种情况下，您必须从<ul>选择<h1>JEWLLERY</h1> <ul>

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就足够了。

Answer 2

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