Cum să aducem ul list-items pe orizontală în loc de verticală? [duplicat] (Programare, Html, Css)

Ayush Bhagoliwal a intrebat.

Vreau să fac meniul folosind link-uri care vin orizontal mai degrabă decât vertical

Cod HTML

<div>
        <ul>
            <li> <a id="ccs" href="#"> Home </a> </li>
            <li> <a id="ccs" href="#"> Marketing Service </a> </li>
            <li > <a id="ccs" href="#"> IT Management Service </a> </li>
            <li > <a id="ccs" href="#"> Molex Portfolio </a> </li>
            <li > <a id="ccs" href="#"> Contact US </a> </li>
            <li > <a id="ccs" href="#"> Employment Opportunities </a> </li>
        </ul>
        </div>

Cod CSS

#ccs{
    background-color:#4CAF50;
    padding:20px;

    border:3px;
    color:yellow;
    text-align:center;
    display: inline-block;
    text-decoration:none;

Vă rugăm să ajutați!!!!

2 răspunsuri
Mike June Bug Captain

Vă rugăm să cercetați… http://www.w3schools.com/css/css_navbar.asp sau Articole de listă orizontală CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

Omeiza

eliminați display:inline-block; din #ccs

Apoi folosiți

li {
display: inline-block;
}

Comentarii

  • Mulțumesc pentru ajutor. Răspunsul tău a funcționat perfect conform cerințelor mele. Eu studiez css de la w3schools.com și sunt la jumătatea drumului prin ea. Nu am studiat inline-block de aceea m-am confruntat cu o problemă Mulțumesc pentru ajutor din nou!!!! –  > Por Ayush Bhagoliwal.

Tags:,