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