Question

如何对齐条形中心的前3个按钮？

#navbar{
    list-style-type: none;
    position: relative;
    top: -4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #212121;
}

Answer 1

在导航栏中，您可以将这三个放在一个单独的div中，然后将其与中心对齐

Answer 2

你好朋友把你的中心您只需要的菜单选项（nav）使用文本规则：center; ，为什么？因为菜单列表是由''li''或''ul''和我们组成仅将此规则应用于列表和准备:)，来自墨西哥的问候;）

Answer 3

<html>

<head>
    <style>
        body{
            margin: 0px;
        }
        .navbar{
            height: 60px;
            background-color: #bbb;
            line-height: 60px; //this will center inline elements in your navbar
        }
        .container{
            margin-left: 5%;
            margin-right: 5%;
        }
        .btn{
            background-color: white;
            padding: 10px 20px;
            width: 100px;
            border: none;
            border-radius: 2px;
            display: inline;
        }
        .nav{
            display: inline;
            list-style-type: none;
        }
        .nav li{
            display: inline;
        }
    </style>
</head>
<body>
    <!--Navbar-->
    <nav class="navbar">
        <div class="container">
            <ul class="nav">
                <li><button class="btn">Button1</button></li>
                <li><button class="btn">Button2</button></li>
                <li><a class="btn">&lt;a&gt; Button</a></li>
            </ul>
        </div>
    </nav>
</body>

以上代码应该适合您。我使用锚标记和按钮标记

显示了按钮

如何将导航栏中的按钮居中？

3 个答案: