У меня есть список, который я хочу превратить в горизонтальное меню. Почему, указывая элементам (в данном случае li) inline-block
, они не выстраиваются в одну линию, а продолжают вести себя как блочные, выстраиваясь один под одного?
a {
text-decoration: none;
}
.wrap {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
}
.menu_block {
margin-top: 20px;
margin-bottom: 20px;
}
.menu_block li a{
display: inline-block;
color: black;
font-size: 20px;
text-transform: uppercase;
margin-right: 50px;
}
.menu_block li:last-child {
margin-right: 0;
}
.menu_block ul {
list-style: none;
}
.logo {
margin-left: 270px;
}
.btn a {
padding: 18px 35px;
background: #ff7340;
color: #ffffff;
border-radius: 5px;
text-transform: uppercase;
}
<header>
<div class="wrap">
<div class="logo">
<img src="https://i.postimg.cc/Pf81DpN4/logo.png" alt="">
</div>
<div class="menu_block">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">meet us</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
</ul>
</div>
<div class="btn">
<a href="#">adventures</a>
</div>
</div>
</header>