#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
и все они находятся внутри одного контейнера. Я использовал 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>
Комментарии:
1. <p style=»отступ справа: 0,5 em; отступ слева: 0,5em; margin-bottom: 0;»>
Ответ №1:
Абзацы Bootstrap 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
Вы могли бы значительно упростить разметку и CSS, используя панель навигации начальной загрузки. Также нет причин использовать вложенные контейнеры.
Ответ №2:
У вас есть поле, равное элементу 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>
Ответ №3:
вы также используете margin-bottom:0
или
Ответ №4:
.mb-0{margin-bottom:0px;}
<p style="padding-right: 0.5em; padding-left: 0.5em;" class="mb-0"> or </p>
Ответ №5:
добавьте margin-top в тег 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;
}
<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>
Ответ №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>