Question

都放在一个容器中。我已经使用align-items-center将它们全部对齐在容器内的同一行中。但是，该属性不适用于

标记。我想念什么？我希望“或”与注册并登录按钮保持一致。

nav ul{
    padding: 0;
    display: flex;
    margin-bottom: 0;
}
nav li{
    list-style: none;
    padding: 0 0.2em;
}
nav a{
    text-decoration: none;
}
#login{
    display: inline-block;
    min-width: max-content;
    max-height: min-content;
    margin: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Answer 1

引导程序4的段落<p>的底部有空白。使用mb-0类将其删除。

<p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>

https://www.codeply.com/go/n337ATFcOh

通过使用Bootstrap Navbar or Nav，可以大大简化标记和CSS。也没有理由使用nested containers。

https://www.codeply.com/go/ZiTM3iuHrd

Answer 2

您已将margin设置为p元素。只需将其删除，就可以了：

nav ul{
    padding: 0;
    display: flex;
    margin-bottom: 0;
}
nav li{
    list-style: none;
    padding: 0 0.2em;
}
nav a{
    text-decoration: none;
}
#login{
    display: inline-block;
    min-width: max-content;
    max-height: min-content;
    margin: 0;
}

nav p {
  margin: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Answer 3

您还使用margin-bottom：0

或

Answer 4

.mb-0{margin-bottom:0px;}

<p style="padding-right: 0.5em; padding-left: 0.5em;" class="mb-0"> or </p>

Answer 5

在p标签中添加margin-top，如下所示：

 nav ul{
        padding: 0;
        display: flex;
        margin-bottom: 0;
    }
    nav li{
        list-style: none;
        padding: 0 0.2em;
    }
    nav a{
        text-decoration: none;
    }
    #login{
        display: inline-block;
        min-width: max-content;
        max-height: min-content;
        margin: 0;
    }

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em; margin-top: 15px;"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

Answer 6

答案并不是真正解释为什么会这样。

所有标记在浏览器中均具有默认样式。您可以在https://www.w3schools.com/cssref/css_default_values.asp这里查看它们。

因此<p>的默认样式为margin-top: 1em; margin-bottom: 1em;。要删除它，请将margin-top和margin-bottom设置为0。您可以使用类my-0进行此操作。

lesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav>
            <div class="container d-flex align-items-center justify-content-between ">
                <div class="container d-flex align-items-center ">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                <div class="container-flex d-flex align-items-center">
                    <a href="#" style="white-space: nowrap">Sign up</a>
                    <p style="padding-right: 0.5em; padding-left: 0.5em;" class="my-0"> or </p>
                    <button class="btn btn-success btn-md" id="login">Log in</button>
                </div>
            </div>
        </nav>

<p>不在容器中心对齐

6 个答案: