首页 > 怎么让一个水平的导航栏居中呢 能在浏览器屏幕下居中显示?除了固定宽度让它auto这个办法?

怎么让一个水平的导航栏居中呢 能在浏览器屏幕下居中显示?除了固定宽度让它auto这个办法?

导航栏固定宽度显得很不灵活,但是也不能绝对定位,所以很苦恼


display: inline-block; + text-align: center;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #center-nav-demo {text-align: center;}
        #center-nav-demo .nav {display: inline-block; margin: 0; padding: 0; border: 1px solid red;}
        #center-nav-demo .nav li {display: inline-block; border: 1px solid blue;}
    </style>
</head>
<body>
    <div id="center-nav-demo">
        <ul class="nav">
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单1</a></li>
        </ul>
    </div>
</body>
</html>

【热门文章】
【热门文章】