بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ

Solved مشکل html و css در بخش note ( لیست flex )

مشاهده پاسخ‌ها 1
مدیریت گفتگو
Criss 10 سال پیش
آخرین تغییر: 10 سال پیش

سلام دوستان

من سعی کردم پروژه استاد رو هم تست کنم ، اما ظاهرا کد های استاد برای 03-02-notes.zip شامل کدها تمایش entery-todo ها نمیشه

چیزیکه بهش به مشکل بر خوردم این هست که سمت راست تمام لیست ها یک فضای خالی میوفته ! حتی وقتی که تمام کدهارو شبیه به استاد میزنم !

این فضای خالی سمت راست فقط خاصیت background و border رو بخودش میگیره  و چیزهای دیگه رو نمیگیره !

این فضای خالی بصورت پیشفرض در UL وجود داره < ولی چرا برای استاد نمایش داده نمیشد ؟ !

 

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
    <ul class="todo-entry">
      <li>عنوان</li>
      <li>توضیحات</li>
      <li>تاریخ</li>
    </ul>
</body>
</html>


.todo-entry{
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.todo-entry li {
  display:  inline-block;
  padding: 7px 10px;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
}
.todo-entry:nth-child(odd){
  background: rgba(255, 127, 0, 0.5);
}
.todo-entry:nth-child(even){
  background: rgba(0, 65, 125, 0.5);
}

نظرات

mhpakdel 10 سال پیش
به کلاس todo-entry یعنی در واقع ul، این خاصیت رو اضافه کن: padding=0 ، چون این حاشیه اضافی فاصله ul با body هست که با padding=0 برای کلاس list این حاشیه از بین میره. همین مشکل رو یکی از دوستان در این لینک داشتن. احتمالا مشکل از همین یه خاصیت padding باشه.

پاسخ‌ها 1

Criss 10 سال پیش

حل شد :

 ul {
  padding-left: 0px;
  padding-right: 0px;
}

 

نظرات

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .