Пытается, чтобы мои кнопки были расположены над текстом ниже. Я думаю, что это связано с моими плавающими левыми, но я считаю, что мне нужно все еще плавать, потому что контент потом тоже плавает.
Маржа: 0 авто; не работает.
Пожалуйста, порекомендуйте:
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
vertical-align: middle;
text-align: center;
font-size: 2rem;
display: block;
width: 150px; /* 150 / 980 */
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav a.button {
float: left;
margin: 0 auto;
}
nav a.button:not(:first-child) {
margin-left: 150px;
}
<header>
<nav>
<div class="btngroup">
<a href="#" class="button">contact</a>
<a href="#" class="button">blog</a>
</div>
</nav>
</header>
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
text-align: center;
font-size: 2rem;
display: inline-block;
width: 150px; /* 150 / 980 */
}
.button:not(:first-of-type) {
margin-left: 10px;
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav div.btngroup {
width: 410px;
margin: auto;
height:
}
nav a.button {
float: left;
margin: 0 auto;
}
используйте свойство inline-block в классе кнопок
.button
{
display:inline-block;
}
и удалить свойство float из nav a.button
Попробуйте изменить nav a.button
следующим образом:
nav a.button { display: inline-block; margin: 0 auto; }
или
nav a.button { display: inline; margin: 0 auto; }