#html #css #flexbox
#HTML #css #flexbox
Вопрос:
Рядом с моей кнопкой поддержки есть синее пространство, когда я проверяю и нажимаю на панель навигации. Почему она там, а не занимает все пространство. Предполагается, что она должна быть сдвинута полностью вправо. Я использовал только flexbox.
То, что я хотел сделать, это заставить его занять это пространство и избавиться от него.
:root {
--cta-color: #a82534;
--main-grey-color: #e2dde1;
--brown-color: #a08f81;
}
html,
body {
height: 100%;
}
img {
width: 100%;
}
main {
min-height: 100vh;
background-color: var(--main-grey-color);
background: -webkit-linear-gradient(
left,
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 0.2)
),
url("https://images-na.ssl-images-amazon.com/images/I/61fZ+YAYGaL._SX569_.jpg")
no-repeat;
background: -o-linear-gradient(
left,
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 0.2)
),
url("https://images-na.ssl-images-amazon.com/images/I/61fZ+YAYGaL._SX569_.jpg")
no-repeat;
background: linear-gradient(
to right,
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 10),
rgba(226, 221, 225, 0.2)
),
url("https://images-na.ssl-images-amazon.com/images/I/61fZ+YAYGaL._SX569_.jpg")
no-repeat;
/* background-size: contain;*/
background-attachment: fixed;
background-position: right;
}
/*
html {
min-height: 100%;
background-image: url(image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
}
a {
color: var(--brown-color);
cursor: pointer;
}
.navbar {
margin: 0 auto;
max-width: 1800px;
width: 89%;
padding-top: 2px;
display: flex;
align-items: center;
font-family: "brownregular";
font-size: 1.2rem;
}
.nav-items {
display: flex;
margin: 0px 20px;
width: 86%;
align-items: center;
letter-spacing: 0.5px;
}
.nav-logo {
height: 82px;
width: 80px;
}
.nav1,
.nav2,
.nav3 {
margin: 5px 40px;
}
.nav3 {
flex-grow: 1;
}
.middle {
flex-grow: 2;
}
.ig {
margin-right: 50px;
}
.ig,
.fb {
height: 25px;
width: 23px;
vertical-align: middle;
}
.nav4-button {
display: flex;
background-color: #a82534;
width: 8em;
height: 2.8em;
border-radius: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav4 {
margin-left: 0 auto;
}
.white-text {
color: white;
}
.primary-header-container {
padding-top: 6.5rem;
display: inline-block;
}
.primary-header {
margin-bottom: 0.2em;
}
.sub-header-container {
padding-top: 2.3em;
}
.sub-header {
font-size: 1.35rem;
}
.desc {
margin-bottom: 0.7em;
}
.underline {
border-bottom: solid 10px #73353c;
width: fit-content;
}
ul,
li,
.desc-link {
list-style-type: none;
color: #a89da7;
}
.hero-section {
max-width: 1800px;
width: 77%;
margin: 0 auto;
}
h1 {
font-family: "jelleebold";
font-size: 5rem;
color: white;
margin-top: 5px;
}
p {
font-family: "brownlight";
}
.section-bg-color {
background-color: #f4f3f4;
padding: 135px 0px;
}
.card_container {
display: flex;
justify-content: space-between;
max-width: 1590px;
width: 78.5%;
margin: 0 auto;
}
.card {
width: 370px;
/* Set width of cards */
height: 370px;
display: flex;
/* Children use Flexbox */
flex-direction: column;
/* Rotate Axis */
background-color: white;
overflow: hidden;
/* Fixes the corners */
}
.card-header {
color: #d32f2f;
text-align: center;
font-size: 12px;
font-weight: 600;
background-color: inherit;
padding: 5px 10px;
}
.card-main {
display: flex;
/* Children use Flexbox */
flex-direction: column;
/* Rotate Axis to Vertical */
justify-content: center;
/* Group Children in Center */
align-items: center;
/* Group Children in Center (on cross axis) */
padding: 15px 0;
/* Add padding to the top/bottom */
}
.material-icons {
font-size: 36px;
color: #d32f2f;
margin-bottom: 5px;
}
.main-description {
color: #d32f2f;
font-size: 12px;
text-align: center;
}
.sectioncampaign-bg-color {
background-color: #e5dfe3;
padding: 150px 0px;
}
.sectioncampaign-container {
width: 1392px;
margin: 0 auto;
}
h2 {
font-size: 2.8em;
font-family: "jelleebold";
color: white;
}
.body {
font-size: 1.5em;
padding-top: 45px;
width: 55%;
line-height: 40px;
} <main>
<div class="navbar">
<div class="logo">
<a href="index.html"><img class="nav-logo" src="https://i.imgur.com/HAWAwVg.png" alt="cat laying down logo" /></a> </div>
<div class="nav-items">
<div class="nav1"><a href="aboutus.html">About us</a></div>
<div class="nav2"><a href="#">Shop</a></div>
<div class="nav3"><a href="nav3">Get involved</a></div>
<div class="social-icons middle">
<img class="ig" src="https://i.imgur.com/UTO8Ake.png" alt="instagram icon link" />
<img class="fb" src="https://i.imgur.com/UTO8Ake.png" alt="instagram icon link" />
</div>
<a href="nav4.html" class="nav4-button">
<div class="nav4"><span class="white-text">Support</span> </div>
</a>
<!-- <div class="services"><a href="nav3">Services</a></div>-->
</div>
</div>
<!-- /header -->
</main> Комментарии:
1. может быть, измените ширину: 86% на ширину: 100%
2. вы говорите о поле справа?
3. На самом деле нет необходимости размещать свой код здесь, а затем в исполняемой форме на стороннем сайте. Вы можете сделать это прямо здесь, в своем вопросе, вставив свой код в виде фрагмента стека, что я и сделал для вас.
4. Когда я нажимаю «ПРОВЕРИТЬ», затем я нажимаю класс navbar, он показывает синее пространство справа, которое, как я думал, кнопка займет это пространство.
5. Интересно, является ли это причудой браузера. Какой браузер вы используете. Я только что попробовал Chrome и не увидел синего пробела.. jsbin.com/pudidojoyo/edit?output
Ответ №1:
max-width: 1800px;
width: 90%;
padding-top: 2px;
display: flex;
align-items: center;
font-family: "brownregular";
font-size: 1.2rem;
margin: 0 auto;
}
.nav-items {
display: flex;
align-items: center;
letter-spacing: 0.5px;
width:100%;
}
Я исправил это, добавив 100% ширины к элементам и 90% к панели навигации