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

Question

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

Answer 1

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

Answer 2

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