- List one
- List two
- List three
We hope that li is floating and centered (the number of li is not fixed and the width of ul is unknown). You can set ul's text-align:center, and then set li's display to achieve centering, but this is not our original intention. We need to implement float:center.
Here we have to review position:relative first, which will offset the position in the normal document flow based on left, right, top, bottom and other attributes. Then we can make ul position: relative; left: 50%, and then let li float to the left, and then make it position: relative; right: 50% (or left: -50%), then li floats to the middle. Same as centered. Without further ado, let’s try it first.
#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;
}
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
