gpt4 book ai didi

html - 列表的水平对齐

转载 作者:太空宇宙 更新时间:2023-11-04 15:18:33 24 4
gpt4 key购买 nike

如何使列表以内联方式显示.......现在它是垂直对齐的,我可以把它变成水平对齐吗……在下面提供我的 fiddle 链接....

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>

最佳答案

使用float:left;:

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

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

关于html - 列表的水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14819679/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com