在網頁設計中，列表是一個常用的UI元素。在許多情況下，我們會需要將列表兩邊都對齊，使得頁面看起來更加美觀和整齊。那么，如何實現這樣的效果呢？ 在CSS中，我們可以使用text-align屬性來實現文字的對齊。當我們希望將列表左對齊時，可以將text-align屬性的值設置為"left"。不過，如果我們直接這樣設置，會導致列表的左邊是對齊的，但是右邊卻不對齊，這顯然不是我們想要的效果。 解決這個問題的方法是，將列表包裹在一個容器中，再使用CSS處理容器的樣式。我們可以將容器的width屬性設置為一個固定的值，比如600px。這樣，容器的寬度就被限制了，列表也就能夠按照這個寬度進行排版了。接下來，我們可以對列表的li元素使用display:inline-block樣式，使得它們都在同一行上，并且能夠自動換行。最后，我們再將li元素的margin設置為0即可。 下面是一個示例代碼：

<style>
.container{
width:600px;
margin:0 auto;
text-align:left;
}
.container li{
display:inline-block;
margin:0;
}
</style>
<div class="container">
<ul>
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
<li>菜單4</li>
</ul>
</div>

這樣，我們就成功的將列表兩邊都進行了左對齊，并且能夠美觀地顯示出來了。需要注意的是，由于li元素的display屬性被設置為了inline-block，因此可能會出現li元素之間的空隙。這時候，我們可以使用font-size:0的方法來去掉這些空隙。