使 <ul> 列表項完全填充div

Question

我有一個無序列表，它在div元素內。 目的是使列表元素從一側到另一側完全填充<div> 。

現在，左側的位置正好與我所需的位置相同，但我需要右側的外觀相同。 希望你明白我的意思。

小提琴

HTML代碼：

<div id="currency">
                <ul>
                    <li>Currency £</li>
                    <li>Sign in</li>
                    <li>My Account</li>
                    <li>My Gifts</li>
                    <li>My Basket</li>
                </ul>
            </div>

CSS代碼

#currency{
    height: 11px;
    width: 360px;
    background-color: green;
    float: right;
    margin-top: 11px;
    margin-right: 11px;
    line-height: 11px;
    font-size: 11px;
    text-align: justify;
}
#currency ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}
#currency ul li{
    display: table-cell;
}

Answer 1

我想您想實現的是正確使用text-align 。

#currency ul li{
    text-align: center;
}

#currency ul li:first-child {
    text-align: left;
}
#currency ul li:last-child {
    text-align: right;
}

小提琴

Answer 2

嘗試使用flexbox模型，因為它適用於以下情況：

flex CSS屬性是一種簡寫屬性，用於指定flex項目更改其尺寸以填充可用空間的能力。 可以拉伸彈性項目以使用與其彈性增長因子或彈性收縮因子成比例的可用空間，以防止溢出。

#currency {
    width: 500px;
    background-color: green;
    float: right;
    margin-top: 11px;
    margin-right: 11px;
    line-height: 11px;
    font-size: 14px;
    text-align: justify;
    padding:10px;
    vertical-align:middle;
}
#currency ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content:center;
    width: 100%;
}
#currency ul li {
    flex-grow:2;
    text-align:center;
    margin:3px;
    background:#fc0;
    height:20px;
    padding:5px;
}

見小提琴

添加了所有顏色，內邊距和邊距以顯示其工作原理，因為您的小示例很難看清