0

我有一个水平列表(用于导航栏),我希望单个列表项是多行的。我尝试使用 a<br />但这会导致整个列表跳过一行

这是我为 html 得到的:

<ul class="nav_list">
        <li><a href="#">Home<a></li>
        <li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
        <li><a href="#">Early <br />Childhood<a></li>
        <li><a href="#">Home<a></li>
        <li><a href="#">Home<a></li>

</ul>

和CSS:

.nav_list {
    float:right;
    height:30px;
    margin-top:55px;
    width:510px;
}

.nav_list li {
    display:inline;
    list-style-type:none;

}

.nav_list li a {
    font-size:18px;
    font-family: arial;
    color:#b64366;
    text-decoration:none;
    padding:4px 4px 5px 10px;
    background-image:url('../images/nav_divider.png');
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;

    }

这就是它的样子(photoshop): 在此处输入图像描述

有什么建议么?

4

3 回答 3

1

这是您的解决方案:http: //jsfiddle.net/3jWwH/

Html 有一些错误,例如“a”标签未正确结束“/a”。

'br /' 工作正常,您只需将 float:left 添加到 '.nav_list li'

另外我认为您应该将填充应用于“li”而不是“a”。

这个对吗?

于 2012-06-24T16:37:06.590 回答
0

我认为这就是你想要的:

http://jsfiddle.net/zXzXn/1/

CSS:

.nav_list {
    float:right;
    margin-top:55px;
}

.nav_list li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
    margin:0 10px 0 0;

}

.nav_list li a {
    font-size:18px;
    font-family: arial;
    color:#b64366;
    text-decoration:none;
    padding:4px 10px 5px 10px;
    background-image:url('../images/nav_divider.png');
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;
    display:block;

}
.nav_list li a:hover{
    border-bottom:2px solid #b64366;
}

​</p>

于 2012-06-24T16:29:02.897 回答
0

您可以为每个列表元素设置一个宽度,以将它们限制为某个宽度。这将导致单词拆分为多行。

.nav_list li a {
    width: 100px;
}

然后添加一个底部边框以在悬停时添加下划线。

.nav_list li :hover {
    border-bottom: 1px solid #b64366;
}
于 2012-06-24T16:33:00.533 回答