简体   繁体   中英

Make <ul> list items fill div completely

I have a unordered list, which is inside a div element. The goal is to make list elements fill the <div> from one side to the other perfectly.

Right now the left side is positioned just as I need, but I need the right side to look the same way. Hopefully you get the idea of what I mean.

Fiddle

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 code

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

I think want you want to achieve is using text-align properly.

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

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

Fiddle

Try the flexbox model since it's meant for situations like this:

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.

#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

All colors, paddings and margins were added in order to show how it works since your tiny example is very difficult to see

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM