divs العائمة في عناصر القائمة

StackOverflow https://stackoverflow.com/questions/93625

  •  01-07-2019
  •  | 
  •  

سؤال

لدي قائمة مع اثنين <div>ق في كل <li> وأريد أن أطفوهم واحدًا بجانب الآخر وأريد <li> لأخذ كامل المساحة المتاحة.كيف فعلتها؟

<html>
    <head>
        <title></title>
        <style type="text/css">
            body {
            }
            ul {
            }
            li {
            }
            .a {
            }
            .b {
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="a">
                    content
                </div>
                <div class="b">
                    content
                </div>
            </li>
        </ul>
    </body>
</html>
هل كانت مفيدة؟

المحلول 

 *{ margin: 0; padding: 0;}
 li{  width: 100%: display: block; } 
 li:after{ clear: both; } 
 div.a{ width: 49%;  float: left; }
 div.b{ width: 49%;  float: left; }

ينبغي أن تفعل الخدعة.

نصائح أخرى

بالنسبة لـ div، ما عليك سوى التحرك إلى اليسار وli، فأنت تريد إجراء مسح.لذا:

li
{
    clear: left;
}
.a
{
    float: left;
}
.b
{
    float: left;
}

أرى أن هذا منشور قديم ولكن إذا واجه شخص ما نفس المشكلة فكر في هذا: 

<div>A block-level section in a document</div>
<span>An inline section in a document</span>

يمكنك استخدام فترة بدلاً من شعبة

للحصول على شعبة إلى جانب الآخر أو أفقيًا عليك استخدام القوة الغاشمة باستخدام .المغلق ولكن إذا كنت تستخدم فترة سوف يحدث ذلك بشكل طبيعي.انسخ الكود التالي والصقه في ملف a لغة البرمجة وانظر ما أتحدث عنه:

<ul>
  <li>
      <div style="background-color:red">red</div>
      <div style="background-color:blue">blue</div>
  </li>
  <li>
      <span style="background-color:red">red</span>
      <span style="background-color:blue">blue</span>
  </li>
</ul>

وأيضاً على الأقل بالنسبة لمايكروسوفت <li><div></div></li> لن يتم التحقق من صحة.

دون التحقق للتأكد، يجب أن يعمل هذا


LI { width: 100%; }
.a { float: left; }
.b { float: right; }

أفترض بأخذ المساحة بأكملها أنك تقصد عرضًا بنسبة 100٪.وأفترض أيضًا أنك لا تريد تطبيق التصميم على القائمة، ولهذا السبب قمت بإزالته في هذا المثال.وهذا أيضًا خالي من الاختراق.لا تحتاج إلى مسح أي شيء، طالما أن عنصر القائمة الخاص بك له عرض وتجاوز:زوج الملكية/القيمة المخفية.

ul,
li {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    overflow: hidden;
}
li div.a,
li div.b {
    float: left;
}

li { width: 100%;}
.a { float: left;}
.b { float: left;}

li{width:100%;}
.a{}
.b{float: left;}

يجب أن يتم ذلك كما هو مطلوب من معرفتي بـ CSS

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top