2

HTML / CSS UL メニューでスタイリングを行う方法についての小さな質問です。

私は標準の UL メニューを持っていますが、スタイリングに特定の外観を実現する方法について頭を悩ませています。現在の UL メニューは次のとおりです。

http://jsfiddle.net/WMQqt/

(HTML)

<ul id="nav">
    <li><a href="#">CONTACT US</a>
    </li>
    <li><a href="#">HOME</a>
    </li>
</ul>

(CSS)

#nav {
    list-style: none;
    margin-bottom: 10px;
    */ margin-top: -6px;
    position: relative;
    right: 286px;
    z-index: 9;
    height: 26px;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
}
    #nav li {
    float: right;
    margin-right: 10px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #444444;
    background: #fff;
    text-decoration: none;
    border: 1px solid grey;
}

#nav a:hover {
    color: #fff;
    background: #04B431;
}

メニュー ボタンには小さな 1 ピクセルの境界線を設定したいのですが、背景色が始まる前に約 3 ピクセルの余白を追加します。

これがどのように見えるかに似ています：

http://jsfiddle.net/6PY7z/

これは、UL メニュー方式を使用して実行できますか?

アドバイスありがとうございます。私は HTML / CSS の専門家ではありません。

4

3 に答える 3

6

タグに追加marginして境界線を移動ali

#nav li
{
    float: right;
    margin-right: 10px;

    border: 1px solid grey;
}

    #nav a
    {
        display: block;
        padding: 5px;
        color: #444444;
        background: #ccc;
        text-decoration: none;
        margin:3px;    
    }

デモ

于 2013-03-15T11:21:20.213 に答える
2

次のスタイルを使用して、目的を達成できます。

#nav li
{
    float: right;
    margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}

#nav a
{
    display: block;
    padding: 5px;
    color: #444444;
    background: #d8d8d8; /*new background-color*/
    text-decoration: none;  
    border: 3px solid white; /*add white padding here*/
}

http://jsfiddle.net/WMQqt/4/

于 2013-03-15T11:27:41.287 に答える
0

わかった

HTMLで行く

<dl><div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
     <div><dt>F</dt><dd>T</dd></div>
</dl>

CSSで

dl { display: flex;
flex-direction: column;}

いくつかのヒント...

dt float left AND dd float right

于 2018-12-01T22:31:45.510 に答える