水平居中可变宽度菜单

Posted 2021-02-25

<div id="menu">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
 
<style>
#menu {
    text-align: center;
}
 
#menu li {
    display: inline;
    float: right;
    background: #000;
    padding: 5px 10px;
    float: left;
    margin: 0 1px 0 0;
}
 
#menu ul {
    display: inline-block; 
   *display: inline; 
}
 
 
 
#menu a {
    color: #fff;   
}
 
 
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
</style>