Çözüldü Nav barı içindeki linkleri yan yana sıralama

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

264523

Gigapat
İlk 5 Haneli Mesajınız!
Katılım
14 Haziran 2019
Mesajlar
12.114
Makaleler
4
Çözümler
68
1616322572440.png


[CODE lang="html" title="index.html"]<html>
<head>
<style>

nav{
border: 3px solid blue;
margin-top: 10px;
text-align: center;
word-spacing: 100px;
background-color: rgb(104, 118, 161);
height: 50px;

}
nav ul a{
color: crimson;
background-color: yellow;
text-align:right;
}

.baslik{
font-style: oblique;
font-size: 100px;
}

header{
margin: auto;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
background-color: blue;

}

</style>

</head>
<body>
<header class="baslik">Ramazan Unsal</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>[/CODE]

Linkleri yan yana nasıl getirebilirim?
@Berkay Davas @300319
 
Son düzenleme:
Çözüm
Farklı ve daha basit bir yöntem:
CSS:
li {
    display: inline-block;
}
Normalde li liste elemanları blok elemandır, yani satır boyunca yer kaplar. Bu komut sayesinde liste elemanlarını sadece kendi boyutları kadar yer kaplayacak şekilde ayarlıyoruz.
1616354311114.png


bunu istiyorsun değil mi? Kodlar aşağıda tabloya gerek yok. soldan boşluk verdim ben kendin ayarlarsın class ismi "menu"

[CODE title="kod"]<html>
<head>
<style>

nav{
border: 3px solid blue;
margin-top: 10px;
text-align: center;
word-spacing: 100px;
background-color: rgb(104, 118, 161);
height: 50px;

}
.menu{
list-style: none;
float: left;
margin-left: 30px;
color: rgb(104, 118, 161);
background-color: yellow;

}

.baslik{
font-style: oblique;
font-size: 100px;
}

header{
margin: auto;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
background-color: blue;

}

</style>

</head>
<body>
<header class="baslik">Ramazan Unsal</header>

<nav>
<ul>
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">News</a></li>
<li class="menu"><a href="#">Contact</a></li>
<li class="menu"><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>[/CODE]
 
Eki Görüntüle 934007

Bunu istiyorsun değil mi? Kodlar aşağıda tabloya gerek yok. Soldan boşluk verdim ben kendin ayarlarsın class ismi "menu"

[CODE title="kod"]<html>
<head>
<style>

nav{
border: 3px solid blue;
margin-top: 10px;
text-align: center;
word-spacing: 100px;
background-color: rgb(104, 118, 161);
height: 50px;

}
.menu{
list-style: none;
float: left;
margin-left: 30px;
color: rgb(104, 118, 161);
background-color: yellow;

}

.baslik{
font-style: oblique;
font-size: 100px;
}

header{
margin: auto;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
background-color: blue;

}

</style>

</head>
<body>
<header class="baslik">Ramazan Unsal</header>

<nav>
<ul>
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">News</a></li>
<li class="menu"><a href="#">Contact</a></li>
<li class="menu"><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>[/CODE]

1616355171230.png


Hocam kafamdaki böyle bir şeydi. Yaptım fakat çok kötü oldu:)
 
Farklı ve daha basit bir yöntem:
CSS:
li {
    display: inline-block;
}
Normalde li liste elemanları blok elemandır, yani satır boyunca yer kaplar. Bu komut sayesinde liste elemanlarını sadece kendi boyutları kadar yer kaplayacak şekilde ayarlıyoruz.
 
Çözüm
Farklı ve daha basit bir yöntem:
CSS:
li {
display: inline-block;
}
Normalde li liste elemanları blok elemandır, yani satır boyunca yer kaplar. Bu komut sayesinde liste elemanlarını sadece kendi boyutları kadar yer kaplayacak şekilde ayarlıyoruz.

Evet bu daha kolay teşekkür ederim.
 

Technopat Haberler

Yeni konular

Geri
Yukarı