Question

今天我尝试了一些独特的东西，所以我决定编写我的模板。

你知道有些菜单有标题和描述吗？

实施例

主页我们的主页

微博关注我们！

该菜单应如何显示：

http://gyazo.com/360b81db32cf61922e9ff8f55274d779

好吧，我尝试在li项目中使用
添加一个描述，但它根本不起作用！

<div class="header">
     <div class="container">
           <div id="logo"><a href="#"><img src="img/logo.png"/></a></div>
                <div class="menu">
                <ul>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                <li>Home<br /> Main Page</li>
                </ul>
            </div>
     </div>
</div>

这就是我使用的CSS：

.header {
background: #6b6353 url("../img/header.png");
width: 100%;
height: 112px;
}

#logo {
float: left;
margin-top:22px;
}

.subheader {
background: #deac12 url("../img/subheader.png");
width: 100%;
height: 36px;
}

.menu ul li{
display: inline;
}

为什么它没有工作，即使它有内联和＆amp;休息一下？

该代码会发生什么：

http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236

谢谢！

Answer 1

你应该使用display: inline-block作为你的li，为了上帝的缘故，停止使用<br>标签，改为使用<span>或<p>。

Answer 2

.menu ul li{
    float: left;    
}

将解决您的问题。你得到换行符，但是第二个li在第二个换行符后立即开始（第二个li的第一行将在第一个li的第二行旁边开始），所以这就像

[Home
Main Page][Home
Main Page][Home
Main Page]...

Answer 3

尝试使用

.menu ul li{
list-style: none;
float: left;
}

删除display: inline;会使列表样式可见，这就是list-style: none;的原因，而float: left;会使所有<li>位于同一行。

创建带描述的菜单项

3 个答案: