Помогите решить вопрос

Sanya Proger разместил пост 3 недель назад

Здравствуйте! Помогите пожалуйста решить проблемку. Хотел сделать навигационную панель с конпками что б они были одна за другой, вот написал код:

html:

<div class="wrapper">

<div class="row">
<div class="nav-bar">
<div class="my-button"> <a href="#">button1</a> </div>
<div class="my-button"> <a href="#">button2</a> </div>
<div class="my-button"> <a href="#">button3</a> </div>
<div class="my-button"> <a href="#">button4</a> </div>
</div>
</div>

<div class=" content">

</div>
</div>

css:

.wrapper {
display: flex;
flex-direction: column;
height: 100%;
background: url("../Images/background2.png") no-repeat fixed;
background-size: cover;
}
.nav-bar {
width: 100%;
height: 80px;
position: fixed;
top: 0;
font-size: 30px;
border: thin solid black;
border-bottom: solid black;
z-index: 2;
opacity: 1;
margin-left: 15px;
}
.my-button {
position: relative;
}

В результате кнопки съехали одна за другой в столбик, а не в ряд, как я хотел. 

Как сделать так, что б кнопки были расположени по навигационной панели адекватно, как на всех сайтах?

  • Пост понравился
  • Иван Бровченко
Отсортировать по: Стандартный | Последний | Голоса
Sanya Proger разместил пост 3 недель назад

Вот скриншот проблемы. Чёрным подчёркнута панель, где должны быть кнопки вверху

Maxim Savin разместил пост 3 недель назад

Я исправил вёрстку и немного добавил стилей:

<div class="wrapper">

<div class="row nav-bar">
<a class="my-button" href="#" role="button">button1</a>
<a class="my-button" href="#" role="button">button2</a>
<a class="my-button" href="#" role="button">button3</a>
<a class="my-button" href="#" role="button">button4</a>
<a class="my-button" href="#" role="button">button5</a>
</div>

<div class=" content">

</div>
</div>
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
background: url("../Images/background2.png") no-repeat fixed;
background-size: cover;
}
.row, nav-bar {
height: 80px;
position: fixed;
width: 100%;
top: 0;
font-size: 30px;
border-bottom: solid black;
z-index: 2;

margin-left: 0;
margin-right: 0;

justify-content: center;
}
.content {
min-height: 80vh;
margin-top: 80px;
}

.my-button {
border: 3px solid black;
padding: 5px;
margin: 10px;
background-color: gray;
color: black;
justify-content: center;
font-family: Consolas;
border-radius: 30px;
text-decoration-line: none;

}
.my-button:hover {
background-color: whitesmoke;
text-decoration: none;
transition: 0.5s;
}

В результате все кнопки в ряд, как в адекватной навигационной панели, как и просил)

Maxim Savin разместил пост 3 недель назад

Александр Чигряй разместил пост 3 недель назад

у тебя ссылки завернуты в див. Надо было тогда nav-bar сделать display:flex, тогда бы они встали в строку.

  • Пост понравился
  • Иван Бровченко
Close