Şimdi Ara

Listeyi yan yana yazdırma

Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
3
Cevap
0
Favori
614
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar makina mühendisiyim kendimi geliştirmek adına web tasarımı öğrenmeye başladım ancak bir yerde tıkandım aldığım kursta.Liste yan yana yazdırma muhabbeti var gereken her şeyi yapıyorum ancak bir türlü yan yana olmuyor alt alta çıkıyor bir bakabilirmisiniz rica etsem?

    <!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Document</title>

        <style>

          * {

            border-sizing: border-box;

          }


          body {

            margin: 0;

          }

          #ustnav {

            background-color: rgb(96, 95, 108);

          }


          #logo {

            color: #fff;

            text-decoration: none;

            font-weight: bold;

            font-size: 21px;

            padding: 10px;

          }

          .navlist {

            display: inline-block;

            text-align: right;

            width: calc(100% - 99px);

          }

          .navelement {

            list-style-type: none;

            margin: 0;

            padding: 0;

            text-decoration: none;

            color: #fff;

          }

          .navelement a {

            text-decoration: none;

            color: #fff;

          }

          .navelement a:hover {

            color: black;

          }

        </style>

      </head>

      <body>

        <nav id="ustnav">

          <a href="#" id="logo">MovieApp</a>

          <ul class="navlist">

            <li class="navelement"><a href="#" class="film">Filmler</a></li>

            <li class="navelement"><a href="#" class="dizi">Diziler</a></li>

            <li class="navelement"><a href="#" class="login">Login</a></li>

          </ul>

        </nav>


        <header id="main__header">

          <h1>Welcome to MovieApp</h1>

        </header>


        <section id="how-it-works">

          <div id="enustkisim-how-it-works">

            <h2>How it works?</h2>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor

              repellendus minus doloribus tenetur accusamus?

            </p>

          </div>

          <div id="altuclu-how-it-works">

            <h2>Register</h2>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor

              repellendus minus doloribus tenetur accusamus?

            </p>

            <h2>Choose a plan</h2>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor

              repellendus minus doloribus tenetur accusamus?

            </p>

            <h2>Enjoy Movies</h2>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor

              repellendus minus doloribus tenetur accusamus?

            </p>

          </div>

        </section>

      </body>

    </html>








  • Css'de .navlist class'ını değiştirmen gerek.

    "display:inline-block" yerine, "display:flex" yazarsan sorun çözülür. Sağ tarafa hizalamak için ise "text-align:right" yerine "justify-content-end" yazman yeterlidir.

    Daha fazla bilgi için: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks




    < Bu mesaj bu kişi tarafından değiştirildi mind of a madman -- 4 Mayıs 2022; 18:43:56 >
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.