html - 列表的水平对齐

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

使用float:left;：

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

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

Answer 2

我为您提供了一个 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">

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

另外，我在左边添加了一些边距，这样看起来更好！你可以随心所欲地改变它。