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

见小提琴

添加了所有颜色，内边距和边距以显示其工作原理，因为您的小示例很难看清