Question

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

<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; }

E.g。 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">

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

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

列表的水平对齐

2 个答案: