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

我想要＆＃34; JEWELLEY＆＃34;在左侧有链接，谢谢。

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

我希望菜单显示为

JEWELLERY HOME珠宝地点联系我们评论

然而，目前链接（家居，珠宝，地点，联系我们，评论）显示在＆＃34; JEWELLERY＆＃34;

感谢。

Answer 1

尝试display属性

h1, li{
    display:inline-block;
}

Fiddle Demo

另一种情景在此，您必须从<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;
}

与文字一致的链接

2 个答案: