مشکل با flex

HTML و CSS

AmirrezaSh 10 سال پیش 10 سال پیش

0 0

سلام من یه لیستی از نوع فلکس درست می کنم و با توجه به ستون اول من خاصیتی رو نسبت می دم اما یه ستون ناخواسته سمت راست ستون اولم درست میشه؟؟؟؟؟

ممنون

<html>
<head>
  <meta charset="utf-8">
  <style>
    .list{
      display: flex;
      justify-content: space-between;
      margin: auto;
    }
    .list li{
      display: inline-block;
      padding: 7px 10px;
      border-left: 1px solid #000;
    }
    .list li:nth-child(1){
      border-right: 1px solid #000;
    }
    .list:nth-child(odd) {
      background-color: rgba(0, 0, 125, 0.1);
    }
    .list:nth-child(even){
      background-color: rgba(0, 0, 125, 0.3);
    }
  </style>
</head>
<body style="width:300px;direction: rtl">
<ul class="list">
  <li><span>name</span></li>
  <li><span>name</span></li>
  <li><span>name</span></li>
</ul>
<ul class="list">
  <li><span>name</span></li>
  <li><span>name</span></li>
  <li><span>name</span></li>
</ul>
<ul class="list">
  <li><span>name</span></li>
  <li><span>name</span></li>
  <li><span>name</span></li>
</ul>
</body>
</html>

+3 0

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

برای این سوال پاسخی وجود ندارد.

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