0

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

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

例子：

主页 我们的主页

关注我们！

菜单应该是这样的：

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

为什么即使它有内联和中断它也不起作用？

该代码会发生什么：

http://gyazo.com/a585ed4b408f3c6ed2583244ea4ff236

谢谢！

4

3 回答 3

2

你应该display: inline-block为你的 li 使用，看在上帝的份上，停止使用<br>标签，使用 a<span>或 a<p>代替。

于 2012-10-01T20:06:55.647 回答
0 
.menu ul li{
    float: left;    
}​

将解决您的问题。你得到了换行符，但是第二li个换行符在第二个换行符之后立即开始（第 2 个 li 的第 1 行将在第 1 个 li 的第 2 行旁边开始），所以这类似于

[Home
Main Page][Home
Main Page][Home
Main Page]...
于 2012-10-01T20:07:12.933 回答
0

尝试使用

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

删除display: inline;将使列表样式可见，这就是为什么list-style: none;，并且float: left;将使所有内容都<li>在同一行。

于 2012-10-01T20:08:33.010 回答