HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Inline lista (Menüsor)



Az előző oldalon megismert menü menüsorrá alakítható, ha a listaelemeket inline elemmé alakítjuk a li {display:inline;} stílusdeklarációval.

Annak érdekében, hogy a menüpontok egymás mellé kerülhessenek a fenti stílusdeklarációt ki kell egészíteni a következővel: li {display:inline; }


Példa:

Az előző oldalon látható példa átalakítása

Forráskód



<style> 
  ul {list-style-type: none; }    
  nav {background-color:#e0e0e0;
    text-align:center;
    padding: 5px 5px 5px 0;
    width:585px; height:55px; }     
  nav li {padding:1px; margin:0; display:inline; float:left;}    
  nav ul {padding:1px; margin:0;} 
  nav li a { display: block; background-color:#FFFFFF; 
    margin: 2px; width: 160px; padding: 8px 18px 8px 8px; 
    height: 25px; border-radius: 15px  15px 15px 15px; 
    text-align:right;
    border:1px solid #cccccc; 
    box-shadow: 3px 3px 5px 0px #444444;} 
  nav li a:link {color:#666600;
    font: small-caps  bold 18px Verdana, Geneva, sans-serif; 
    text-decoration:none; }
  nav li a:visited {color:#666600; text-decoration:none;} 
  nav li a:hover {color:#006666; text-decoration:none;} 
  nav li a:active {color:#660000; text-decoration:none;}
</style>
...
<body> 
  <nav>
  <ul><li>
  <a href="http://webfejlesztes...."> CSS3 Színek</a> 
  </li><li>
  <a href="http://webfejlesztes...."> CSS3 Alapok</a> 
  </li><li>
  <a href="http://webfejlesztes...."> CSS3 Kijelölők</a> 
  </li></ul>
  </nav>    
</body>
 

Eredmény*



* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_listak_menusorban_v_01.html