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に追加white-space: nowrap;するだけです。.mymenu

作業を参照してください - > jsfiddle

于 2013-09-21T01:36:33.723 に答える
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 に答える