如果在CSS中設置一個無序列表(ul)的寬度并希望其居中,可能會遇到一些問題。即使設置了寬度和margin:0 auto,這些元素仍然不會居中。
ul { width: 500px; margin: 0 auto; }
這是因為無序列表(ul)是一個塊元素,而其內部的列表項(li)是行內元素。因此,設置寬度僅適用于該ul元素,而其內部的列表項仍然緊貼在左側。
要解決這個問題,需要將列表項(li)元素設置為行內塊元素:
ul { width: 500px; margin: 0 auto; text-align: center; } li { display: inline-block; }
將li設置為行內塊元素意味著它們可以在一行上顯示,并且可以應用margin和padding。通過將ul設置為text-align:center,可以將行內塊元素水平居中。
如此一來,問題就解決了。無序列表現在可以水平居中,而列表項也可以在同一行上顯示。