Html iki farklı etiketi yan yana hizalama
Menü yapmaya çalışıyorum sağ tarafta menu butonları solda da sayfanın adı olan bir logo ya da sayfa adı yazacak şekilde ayarlamaya çalışıyorum ancak uzun zamandır html yazmadım ve unutmuşum iki farklı etiketi yan yana nasıl getirebilirim yani logodan sonra ul etiketi aşağısında kalıyor bunu yanına nasıl getirebilirim? Fotoğraftaki gibi aşağıda kalmasını istemiyorum.
Css kodu çok yok zaten o yüzden atmadım
https://resimyukle.net/image/rBUy
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="./css/main.css">
</head>
<header>
<title>Sayfa | Ana Sayfa </title>
<span id="logo">Logo</span>
<ul>
<li><a>Ana Sayfa</a></li>
<li><a>İletişim</a></li>
<li><a>Hakkında</a></li>
</ul>
</header>
</html>
display: flex ile child elementleri yan yana getirebilirsin. Aynı zamanda belli bir yüksekliğe sahipse align-items: center ile dikeyde ortalama yapabilirsin.
Çok basic bir header örneğini aşağıya bıraktım.
<header>
<div class="logo">LOGO</div>
<nav class="menu">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
<div class="test">test</div>
</header>
* {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
} /* Reset */
header {
display: flex; /* Logo ve menüyü yan yana getirir */
height: 80px;
align-items: center; /* Header içerisindeki child ları dikeyde ortalar */
border-bottom: 1px solid #ccc;
padding: 0 100px;
}
.menu ul {
display: flex; /* Menüdeki li leri yan yana getirir */
margin-left: 30px;
}
.menu ul li:not(:first-child) {
margin-left: 10px;
}
.test {
margin-left: auto;
}
