Question

我正在尝试制作4个带有商品的列表，但是由于四个商品具有不同数量的商品，我在对齐它们时遇到了问题。

当我尝试对ul的类使用inline-block时，这就是结果。

如果将列表设置为相同大小，则会发生这种情况。

这是我的HTML：

<body>

    <img src = "sample-img.png" class="center"/>
    <div class= "externalMenu">
        <ul class="exSection">
            <li> <a href= "#">Packaging </li>
            <li> <a href= "#">Packaging Org Chart </li>
        </ul>

        <ul class="exSection">
            <li> <a href= "#">FAQs </li>
            <li> <a href= "#">KB Articles </li>
            <li> <a href= "#">Customer Survey </li>
            <li> <a href= "#">EUCD Dashboard </li>
            <li> <a href= "#">RSM Dashboard </li>
        </ul>

        <ul class="exSection">
            <li> <a href= "#">SPT Maintenance Calendar </li>
        </ul>

        <ul class="exSection">
            <li> <a href= "#">myEars </li>
            <li> <a href= "#">SLM </li>
            <li> <a href= "#">RSM </li>
            <li> <a href= "#">Remedy </li>
            <li> <a href= "#">Export </li>
        </ul>
    </div>

</body>

这是我的CSS：

*{
margin: 0;
padding: 0;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

.externalMenu{
 width:100%;

}

.exSection{ 
  background-color:yellow;
  list-style-type:none;
  display:inline-block;
  border: 1px solid #000;   
  width: 200px;
  height: 150px;
}

Answer 1

将vertical-align: top;添加到您的.exSection：

.exSection{ 
  background-color:yellow;
  list-style-type:none;
  display:inline-block;
  border: 1px solid #000;   
  width: 200px;
  height: 150px;
  vertical-align: top;
}

您将不需要height: 150px;-除非您要明确设置它。

Answer 2

///添加您的exernalMenu显示属性块

externalMenu{
 width:100%`;
display: block;

}

///将显示属性更改为exSection中的float属性并给出left的值。 //使som的边距彼此更宽。

.exSection{ 



background-color:yellow;
  list-style-type:none;
  float: left;
  margin-left: 10px;
  border: 1px solid #000;   
  width: 200px;
  height: 150px;

} ***

将无序列表与不同数量的列表项对齐

2 个答案: