HTML CSS UL-Menü-styling

Kleine Frage auf, wie um etwas zu erreichen styling auf ein HTML - /CSS UL Menü.

Habe ich ein standard-UL-Menü, aber habe einige Probleme bekommen mein Kopf herum, wie man einen bestimmten look zum styling. Die UL-Menü, wie es derzeit steht, ist hier gezeigt:

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;
}

Ich würde gerne die Menü-Tasten, um eine kleine 1px border, aber dann einige Leerzeichen Polsterung um 3px, bevor Sie die Hintergrundfarbe beginnt.

Ähnlich wie dieser aussieht:

http://jsfiddle.net/6PY7z/

Kann dies durchgeführt werden, indem die UL-Menü-Methode?

Vielen Dank für jeden Rat, ich bin kein Experte mit HTML /CSS.

Einfach die Grenze nach LI und hintergrund Ein (wie Sie es mit DIVs).

InformationsquelleAutor Harry | 2013-03-15

  1. 6

    Hinzufügen margin zu a tag und verschieben Grenze li

    #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;    
    }

    DEMO

    Vielen Dank - ich bin immer noch lernen, und scheitern, um vor Ort diese Dinge manchmal. Schätzen Sie die Erklärung.
    u r welcme und alles gute

    InformationsquelleAutor Sowmya

  2. 2

    können Sie der folgenden Arten verwendet werden, um zu erreichen, was Sie wollen:

    #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/

    InformationsquelleAutor Pete

  3. 0

    ok

    in html gehen

    <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>

    in css

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

    einige Hinweise...

    dt float left UND
    dd float right

    Die Liste Beschreibung <dl> tag hat eine andere semantische Bedeutung als die <ul> tag. Diese sollten nicht Synonym verwendet werden und Sie nicht erklären in Ihrer Antwort, warum Sie empfehlen, eine <dl> sind, nicht, wie es zu lösen wäre OP ' s Frage.
    ja sorry Du hast Recht... ich antwortete ihm eine falsche Frage.. sry...

    InformationsquelleAutor xoxo_tw

Schreibe einen Kommentar