0

我有这个代码

<div class="mymenu">
    <div class="menu">
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
        <a href="#">home</a>
    </div>
</div>

这个CSS代码

.mymenu {
    widht:100%;
    background: url(../images/mbg.png);
    height:40px;
    border-bottom: #21b8ff solid 4px;
    margin:0px 0px 0px 0px;
}

.mymenu.menu {
    padding-top:5px;
    padding-right: 60px;
}

.mymenu.menu a{
    margin-top:3px;
    float:right;
    text-decoration: none;
    font-family: SC_DUBAI;
    font-size: 20px;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    margin:0px 0px 0px 0px;
    border-right: #4c4c4c solid 1px;
    border-left: #818181 solid 1px;
}

.mymenu .menu a:hover{
    color:#636363;
    background: #21b8ff;
    margin:0px 0px 0px 0px;
}

但是当我调整浏览器的大小时，我的菜单会掉下来，我怎样才能让每个 a 标签保持一致，如果我调整浏览器的大小，a 标签会隐藏而不是下一行？

4

2 回答 2

0

使用如下 CSS。

也检查小提琴。它的工作。

.mymenu {
    widht:100%;
    background: url(../images/mbg.png);
    height:40px;
    border-bottom: #21b8ff solid 4px;
    margin:0px 0px 0px 0px;
    overflow:hidden;
}

.mymenu .menu {
    padding-top:5px;
    padding-right: 60px;
}

.mymenu .menu a{
    margin-top:3px;
    float:right;
    text-decoration: none;
    font-family: SC_DUBAI;
    font-size: 20px;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    margin:0px 0px 0px 0px;
    border-right: #4c4c4c solid 1px;
    border-left: #818181 solid 1px;
    height:40px;
}

.mymenu .menu a:hover{
    color:#636363;
    background: #21b8ff;
    margin:0px 0px 0px 0px;
}

例如：http: //jsfiddle.net/K7tmK/

于 2013-09-21T01:29:15.130 回答
0

只需添加white-space: nowrap;到您.mymenu的 css 中。

查看工作 -> jsfiddle

于 2013-09-21T01:36:33.723 回答