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

264523 · 21 Mart 2021

[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

Primearc · 22 Mart 2021

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.

cem samet · 21 Mart 2021

linklere aynı classları verip list style none yapıp float ile sola yaslamayı deneyin.

list-style: none;
float: left;

264523 · 21 Mart 2021

@cem samet cevabınız için teşekkür ederim. Eski usul, tablo ile çözdüm dediğinizi galiba yapamadım ya da olmadı.

cem samet · 21 Mart 2021

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]

264523 · 21 Mart 2021

cem samet dedi:
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]

Hocam kafamdaki böyle bir şeydi. Yaptım fakat çok kötü oldu

Primearc · 22 Mart 2021

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.

264523 · 23 Mart 2021

Primearc dedi:
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.

Lucifer B · 21 Temmuz 2022

Primearc dedi:
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.

denedim olmadı farklı yöntem var mı?

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

Ayrıntılı düzenleme

264523

Gigapat

Primearc

cem samet

Hectopat

264523

Gigapat

cem samet

Hectopat

264523

Gigapat

Primearc

Hectopat

264523

Gigapat

Lucifer B

Yoctopat

Benzer konular