列表中的CSS列表没有水平对齐吗？
列表中的CSS列表没有水平对齐吗？
提问于 2019-03-19 14:36:40
我正在做一个水平菜单，四个部分应该是相邻的，香肠卷，薯条，鸡翅，菠菜风车和大蒜面包应该垂直，但水平靠近下一个列表。我检查了警报建议的每一个问题都与这个问题相似或相同，但没有一个问题有帮助，也许我的HTML有什么问题？
<form method="post" action="menu.php">
<ul>
<li>
<ul class="menus">
<li>Sausage Rolls</li>
<li>Fries</li>
<li>Wings</li>
<li>Spinach Pinwheels</li>
<li>Garlci Bread</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Instant Pot Chicken</li>
<li>Salmon Pattles</li>
<li>Callco Cabbage</li>
<li>Bacon Wrappend Jalapeno</li>
<li>Potato Mash</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Edible Cookie Dough</li>
<li>Ice Cream Sandwich</li>
<li>Cheesecake</li>
<li>Chocolate Cake</li>
<li>Brownies</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Wine</li>
<li>Beer</li>
<li>Water</li>
<li>Juice</li>
<li>Coffee</li>
</ul>
</li>
</ul>
<input type="submit" name="order" value="Order">
</form>
回答 4
Stack Overflow用户
发布于 2019-03-19 14:43:02
使用css flex-box属性，这里我将display:flex添加到您的父ul标记中
它工作得很好。
ul,li{
list-style:none;
padding : 0px;
}
form>ul{
display:flex;
}<form method="post" action="menu.php">
<ul>
<li>
<ul class="menus">
<li>Sausage Rolls</li>
<li>Fries</li>
<li>Wings</li>
<li>Spinach Pinwheels</li>
<li>Garlci Bread</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Instant Pot Chicken</li>
<li>Salmon Pattles</li>
<li>Callco Cabbage</li>
<li>Bacon Wrappend Jalapeno</li>
<li>Potato Mash</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Edible Cookie Dough</li>
<li>Ice Cream Sandwich</li>
<li>Cheesecake</li>
<li>Chocolate Cake</li>
<li>Brownies</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Wine</li>
<li>Beer</li>
<li>Water</li>
<li>Juice</li>
<li>Coffee</li>
</ul>
</li>
</ul>
<input type="submit" name="order" value="Order">
</form>
Stack Overflow用户
发布于 2019-03-19 14:55:12
不使用display: flex;的解决方案
<style>
li.lists {
float: left;
}
form ul.clearfix::after {
clear: both;
content: '';
display: block;
}
</style>
<form method="post" action="menu.php">
<ul class="clearfix">
<li class="lists">
<ul class="menus">
<li>Sausage Rolls</li>
<li>Fries</li>
<li>Wings</li>
<li>Spinach Pinwheels</li>
<li>Garlci Bread</li>
</ul>
</li>
<li class="lists">
<ul class="menus">
<li>Instant Pot Chicken</li>
<li>Salmon Pattles</li>
<li>Callco Cabbage</li>
<li>Bacon Wrappend Jalapeno</li>
<li>Potato Mash</li>
</ul>
</li>
<li class="lists">
<ul class="menus">
<li>Edible Cookie Dough</li>
<li>Ice Cream Sandwich</li>
<li>Cheesecake</li>
<li>Chocolate Cake</li>
<li>Brownies</li>
</ul>
</li>
<li class="lists">
<ul class="menus">
<li>Wine</li>
<li>Beer</li>
<li>Water</li>
<li>Juice</li>
<li>Coffee</li>
</ul>
</li>
</ul>
<input type="submit" name="order" value="Order">
</form>
Stack Overflow用户
发布于 2019-03-19 15:03:23
下面是不使用flex-box的另一种方法
这里我将display: table;添加到ul中，或者将display: table-cell;添加到li中
它工作得很好。
ul,li{
list-style:none;
padding : 0px;
}
form>ul {
display: table;
}
form>ul>li {
display: table-cell;
} <form method="post" action="menu.php">
<ul>
<li>
<ul class="menus">
<li>Sausage Rolls</li>
<li>Fries</li>
<li>Wings</li>
<li>Spinach Pinwheels</li>
<li>Garlci Bread</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Instant Pot Chicken</li>
<li>Salmon Pattles</li>
<li>Callco Cabbage</li>
<li>Bacon Wrappend Jalapeno</li>
<li>Potato Mash</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Edible Cookie Dough</li>
<li>Ice Cream Sandwich</li>
<li>Cheesecake</li>
<li>Chocolate Cake</li>
<li>Brownies</li>
</ul>
</li>
<li>
<ul class="menus">
<li>Wine</li>
<li>Beer</li>
<li>Water</li>
<li>Juice</li>
<li>Coffee</li>
</ul>
</li>
</ul>
<input type="submit" name="order" value="Order">
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55234974
复制相关文章
相似问题
腾讯云开发者
