如何將下列垂直列表更改爲水平列表？

以下編碼以垂直方式輸出列表。我如何調整這使它在水平列表中？例如這樣的：http://www.nol.com.sg/wps/portal/nol 如何將下列垂直列表更改爲水平列表？

<body> 
     <ul id="mainmenu"> 
      <li><a class="menu" href="">Menu</a> 
       <ul> 
        <li><a href="">Home</a></li> 
        <li><a href="">About</a></li> 
       </ul> 
      </li> 
      <li><a class="menu" href="">Company</a> 
       <ul> 
        <li><a href="">History</a></li> 
        <li><a href="">News</a></li> 
       </ul> 
      <li><a class="menu" href="">Contact Us</a></li> 
     </ul> 
    </body>

來源

2014-04-11 Sakaramatha

>利{的孩子的顯示：inline或inline-block}應該幫助 –

如何使菜單，公司和聯繫我們變爲水平？ – Sakaramatha

你在尋找這個http://jsfiddle.net/J592A/1/ –

DEMO

HTML

<ul id="mainmenu"> 
    <li><a class="menu" href="">Menu</a>   
     <ul> 
      <li><a href="">Home</a> 

      </li> 
      <li><a href="">About</a>     
      </li> 
     </ul> 
    </li> 
    <li><a class="menu" href="">Company</a>   
     <ul> 
      <li><a href="">History</a> 

      </li> 
      <li><a href="">News</a> 

      </li> 
     </ul> 
     <li><a class="menu" href="">Contact Us</a> 

     </li></li> 
    </ul>

CSS

#mainmenu li { 
    float:left; 
    list-style-type:none; 
    margin-right:1px; 
    width:80px; 
    text-align:center; 
} 
#mainmenu li li { 
    float:none; 
    padding:0; 
} 
#mainmenu li ul { 
    display:none; 
    padding:0; 
} 
#mainmenu li:hover ul { 
    display: block; 
}

來源

2014-04-11 13:09:23 Santy

http://css.maxdesign.com.au/listutorial/horizontal_master.htm

CSS

#navcontainer ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
text-align: center; 
} 

#navcontainer ul li { display: inline; } 

#navcontainer ul li a 
{ 
text-decoration: none; 
padding: .2em 1em; 
color: #fff; 
background-color: #036; 
} 

#navcontainer ul li a:hover 
{ 
color: #fff; 
background-color: #369; 
}

HTML

<div id="navcontainer"> 
    <ul> 
    <li><a href="#">Milk</a></li> 
    <li><a href="#">Eggs</a></li> 
    <li><a href="#">Cheese</a></li> 
    <li><a href="#">Vegetables</a></li> 
    <li><a href="#">Fruit</a></li> 
    </ul> 
</div>

來源

2014-04-11 12:56:21

請注意'inline'和'inline-block'會讓瀏覽器解釋每一個' li'作爲空格字符，在每個'li'之間添加一個無法由'margin'控制的空白。 'float：left'避免了這一點（當然還有其他問題）。見http://jsfiddle.net/Tuq3N/ – ohcibi

在CSS中使用下面的鱈魚E：

#mainmenu li{ 
display:inline; 
}

來源

2014-04-11 12:59:37

要在此影響LY李是#mainmenu

#mainmenu > li { 
    float:left 
}

來源

2014-04-11 13:12:51 AlexPrinceton

DEMO

HTML

<ul id="mainmenu"> 
    <li><a class="menu" href="">Menu</a>   
     <ul> 
      <li><a href="">Home</a> 

      </li> 
      <li><a href="">About</a>     
      </li> 
     </ul> 
    </li> 
    <li><a class="menu" href="">Company</a>   
     <ul> 
      <li><a href="">History</a> 

      </li> 
      <li><a href="">News</a> 

      </li> 
     </ul> 
     <li><a class="menu" href="">Contact Us</a> 

     </li></li> 
    </ul>

CSS

#mainmenu li { 
    float:left; 
    list-style-type:none; 
    margin-right:1px; 
    width:80px; 
    text-align:center; 
} 
#mainmenu li li { 
    float:none; 
    padding:0; 
} 
#mainmenu li ul { 

    padding:0; 
} 
#mainmenu li:hover ul { 
    display: block; 
}

在CSS #mainmenu

來源

2014-04-11 13:28:56

如何將下列垂直列表更改爲水平列表？

回答

相關問題