4

私はcssに少し慣れていません。モバイル デバイスで表示するテキスト項目が 3 つしかない水平ナビゲーション バーを作成しようとしています。幅を 100% に設定し、各セクションの幅を 32% に設定しました (33% を試しましたが、3 番目の項目が新しい行に配置されます)。モバイル デバイス) 背景色が変わり、余白が表示されます。

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    display:inline-block;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}

.nav li { 
        display:inline;
    }

.nav a {
    width:33%;
    text-align:center;
    display:inline-block;
    padding-bottom:13px;
    padding-top:12px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.nav a:hover { 
    background:#A26A42;
    border:none;
    width:32%
}

ul.nav li:first-child a{
    border:none;
}
ul.nav li:last-child a {
    border:none;
}

CSSの終わり

<ul class="nav">
        <li><a href="#">Search</a></li>
        <li><a href="#">Legend</a></li>
        <li><a href="#">Info</a></li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>

助けてくれてありがとう。

4

3 に答える 3

4

このjsFiddle exampleのように CSS を作り直します。

CSS

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}
.nav li { 
    display:inline-block;
    width:33%;
    margin:0;
    padding:0;
}
.nav a {
    text-align:center;
    padding:12px 0 13px 0;
    margin:0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display:block;
}
.nav a:hover { 
    background:#A26A42;
    border:none;
}

ul.nav li:first-child a{
    border:none;
}
ul.nav li:last-child a {
    border:none;
}​
于 2012-11-13T21:35:10.780 に答える
1

これを試して：

* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)

.nav li {
    display:block;
    float:left;
    width: 33%;
}
.nav li a {
    display:block;
    text-align: center;
}

フィドル: http://jsfiddle.net/kboucher/duaa6/

于 2012-11-13T21:34:40.753 に答える
0

「ホバー」すると、メニュー項目が通常より狭くなります。さらに、境界線を削除すると、境界線がさらに狭くなります。また、間隔のために左右に1pxの境界線を使用しているようです。その場合は、代わりにマージンを使用してください。jsfiddle を使用して練習します。

これを試して：

    ul.nav {
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
        text-align:center;
        font-family: sans-serif;
    }

    .nav li {
        display:inline;
    }

    .nav a {
        width:32%;
        text-align:center;
        display:inline-block;
        padding-bottom:13px;
        padding-top:12px;
        margin-left: 1px;
        background: #62564A;            
    }

    .nav a:hover {
        background:#A26A42;
    }

    ul.nav li:first-child a{
        margin-left: 0;
    }

http://jsfiddle.net/mVv75/4/

于 2012-11-13T21:45:09.383 に答える