居中嵌套塊無序列表結果第二個列表強制底部

Question

我正在嘗試將div中的兩個無序列表居中。要做到這一點，我使用這個基本方略，關鍵這是給父母div一個text-align: center屬性，然後讓孩子ul小號inline-block S：

.area { 
 
    text-align: center; 
 
    border: 2px dashed red; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    width: 75px; 
 
} 
 
.list { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: inline-block 
 
} 
 
.list li { 
 
    border: 1px solid pink; 
 
    margin-bottom: 3px; 
 
    padding: 5px; 
 
}

<div class="area"> 
 
    <ul class="list"> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    </ul> 
 
    <ul class="list"> 
 
    <li>hi</li> 
 
    <li>hi</li> 
 
    </ul> 
 
</div>

然而，這兩個第二個ul中的列表項位於底部而不是從頂部開始。

浮動似乎解決這一具體問題，但後來好像我必須做clearfix父div，以便它匹配孩子ul S的height，此外，我的兩個ul s爲不再以中心爲中心。

有沒有辦法讓第二個ul符合第一個？

Answer 1

剛剛成立vertical-align:top在.list因爲一個元素設置inline-block默認爲vertical-align:baseline

.area { 
 
    text-align: center; 
 
    border: 2px dashed red; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    width: 75px; 
 
} 
 
.list { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: inline-block; 
 
    vertical-align: top 
 
} 
 
.list li { 
 
    border: 1px solid pink; 
 
    margin-bottom: 3px; 
 
    padding: 5px; 
 
}

<div class="area"> 
 
    <ul class="list"> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    </ul> 
 
    <ul class="list"> 
 
    <li>hi</li> 
 
    <li>hi</li> 
 
    </ul> 
 
</div>