列表水平对齐

Question

如何使列表内嵌显示........ 现在它是在垂直对齐，我可以使它成水平对齐.... 提供我下面的小提琴链接.. ..

http://jsfiddle.net/JNyQU/1/

<ul class="homePageLists" style=""> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Menu 
          </li> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Search 
          </li> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Create PN 
          </li> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Product List 
          </li> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Create PN 
          </li> 
          <li style="padding-bottom: 5px; list-style: none; "> 
           <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"> 
           Create PN 
          </li> 
         </ul> 

Answer 1

我已经包括一个jFiddle给你。

http://jsfiddle.net/persianturtle/JNyQU/6/

的解决方案是一个类添加到无序的菜单列表，我称之为的容器“内联”。

的CSS是：

.inline ul { 
    float:left; 
    display:inline; 
} 

.inline ul li { 
    float:left; 
    display:inline; 
} 

我唯一改变的HTML是：

<div class="inline"> 

希望这可以帮助你！如果是这样，请不要忘记复选标记！

此外，我向左侧添加了一些边距，使其看起来更好！无论你喜欢，你都可以改变它。

Answer 2

使用float:left;：

ul { clear: left; } // clear logo img 
li { float: left; } 

如http://jsfiddle.net/JNyQU/4/