🎉 سال نو، مهارت نو، مشاوره رایگان نقشه راه برنامه نویسی (آفر ویژه ثبت نام قبل از افزایش قیمت 🔥)
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ Hossein.7
استفاده از float به جای display:inline برای horizontal کردن لیست یا منو
جامعه Html & CSS ایجاد شده در ۱۵ اردیبهشت ۱۴۰۴

سلام ، وقت بخیر ، من طبق تحقیق هایی که قبلا انجام دادم برای افقی کردن منو از پراپرتی float استفاده کردم . حالا خواستم ببینم فرق خاصی داره یا اینکه اصولی ترش کدوم روش هست ؟ ( من خودم با این روش راحت ترم) . نمونه ای  از کد هاش هم زیر اضافه میکنم. 
با سپاس

 


<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .nav {
        background-color: #817c7c;
      }
      .nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      li {
        float: right;
      }
      li a {
        text-decoration: none;
        color: black;
        padding: 14px 16px;
        display: inline-block;
      }
      a:hover {
        background-color: #000000;
        color: #efefef;
      }
    </style>
  </head>
  <body>
    <nav class="nav">
      <ul>
        <li><a href="#">خانه</a></li>
        <li><a href="#">دانلود</a></li>
        <li><a href="#">بازی</a></li>
        <li><a href="#">فیلم</a></li>
        <li><a href="#">ارتباط با ما</a></li>
      </ul>
    </nav>
  </body>
</html>

سلام. وقت شما هم بخیر

به صورت کلی پیشنهاد می‌شه از float استفاده نشه، به جاش از فلکس‌باکس، گرید و... استفاده کنید.
● وقتی از float استفاده می‌کنید، ممکنه والدِ (مثل <ul>) به خاطر “خالی شدن ارتفاع”، مشکلاتی داشته باشه. برای رفع این مشکل، باید از تکنیک‌هایی مثل clearfix استفاده کنید. این ممکنه کمی کدنویسی رو پیچیده کنه.
● float برای اهداف دیگه‌ای مثل قرار دادن تصویر کنار متن طراحی شده بود و برای چینش آیتم‌های منو، شاید کمی غیرمستقیم به نظر برسه.


با استفاده از display: inline، آیتم‌های منو مثل “متن‌های داخل یک خط” رفتار می‌کنن و کنار هم قرار می‌گیرن. این روش ساده‌تره و معمولاً نیازی به کارهای اضافه مثل clearfix نداره. اما محدودیت‌هایی هم داره، مثلا اگر بخواید کنترل بیشتری روی فاصله‌ها یا ابعاد آیتم‌ها داشته باشید، ممکنه با چالش‌هایی روبه‌رو بشید. برای مثال، نمی‌تونید از ویژگی‌هایی مثل width یا height به‌راحتی استفاده کنید.

 

همون‌طور که در ابتدا هم گفتم در طراحی وب مدرن، روش‌های جدید مثل Flexbox و CSS Grid جایگزین مناسبی برای افقی کردن آیتم‌ها هستن. کلا برای طراحی ریسپانسیو از این روش‌ها استفاده می‌شه به جای float و display: inline

 

اگر هم هنوز یاد نگرفتید این روش‌هارو با دانش فعلیتون ادامه بدید یادگیری رو، جلوتر بهش می‌رسید.

سحر پاشائی ۱۵ اردیبهشت ۱۴۰۴، ۰۸:۴۸

خیلی ممنون ، تشکر از توضیحات ، من هنوز به مبحث Flexbox و CSS Grid نرسیدم . با سپاس

Hossein.7 ۱۵ اردیبهشت ۱۴۰۴، ۱۲:۲۸