Question

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

现在左侧的位置正好我需要，但我需要右侧看起来一样。希望你明白我的意思。

HTML code：

<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

Answer 2

尝试flexbox模型，因为它适用于以下情况：

flex CSS属性是一个指定能力的速记属性一个弹性项目来改变其尺寸以填充可用空间。柔性可以拉伸项目以使用与其成比例的可用空间弯曲成长因子或它们的弹性收缩因子以防止溢出。

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

See fiddle

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

使<ul>列表项完全填充div </ul>

2 个答案: