Copy the Code code as follows:
- List One
- List II
- List three
We want the implementation of Li to be floating, and centered (the number of Li is not fixed, the UL width is unknown). can set the UL Text-align:center, and then set the display of Li, you can achieve the center, but this is not our original intention, we need to implement Float:center.
Here we have to revisit the position:relative, which offsets the position in the normal document flow based on attributes such as Left,right,top,bottom. Then we can let UL for position:relative;left:50%, and then let Li like left float, in Let it position:relative;right:50% (or left:-50%), then Li is like floating in the middle of the center. Don't say much nonsense, try it first.
Copy the Code code as follows:
#macji {
position:relative;
width:100%;
height:80px;
Background-color: #eee;
Text-align:center;
Overflow:hidden;
}
#macji. macji-skin{
Float:left;
position:relative;
left:50%;
}
#macji. Macji-skin li{
position:relative;
right:50%;
Float:left;
margin:10px;
padding:0 10px;
Border:solid 1px #000;
line-height:60px;
}
