html - 让 列表项完全填充 div

Question

我有一个无序列表，它在 div 中元素。目标是使列表元素填充 <div>完美地从一侧到另一侧。

现在左侧的位置正好符合我的需要，但我需要右侧看起来相同。希望您明白我的意思。

Fiddle

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;
}

Fiddle