القائمة الأفقية CSS - متباعدة بالتساوي؟

Question

لدي قائمة CSS قياسية ، مصنوعة من علامات UL و LI. أحتاجهم إلى تغطية الصفحة بأكملها ، أفقياً (وليس حالتي الحقيقية ، لكنني سأخذ هذا لتبسيط الموقف). ومع ذلك ، يتم إنشاء العناصر ديناميكيًا ، ولذا فإنني غير قادر على ترميز أي من عناصر LI ، ولا هوامش.

لقد رأيت حلولًا تستخدم JavaScript لتعيين هذه القيم ، لكنني أحب حقًا تجنبها.

أخيرًا ، لقد رأيت حلًا جيدًا للغاية

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

سيؤدي ذلك إلى إنشاء السلوك المطلوب في معظم المتصفحات ... باستثناء IE.

أيه أفكار؟

تحرير: شكرا على الردود. ومع ذلك ، نظرًا لأن الرمز الذي ينشئ العناصر ليس لي ، فأنا غير قادر على تعيين أنماط مضمنة عند إنشائها دون استخدام JavaScript لاحقًا.

Answer 1

لا يمكنك ضبط ارتفاع أو عرض عنصر مضمّن. http://www.w3.org/tr/css2/visudet.html#inline-width

محاولة display:inline-block;

هنا هو الإصلاح IE:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

إذا كنت تريد السماح للعنصر بالحصول على المساحة المتاحة بأكملها ، فلا داعي لتحديدها مسبق عرض عناصر القائمة (بالطبع ، سيساعد في تغيير حجم عناصر LI على قدم المساواة). يمكنك حل هذه المشكلة من خلال العمل على display منشأه.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

لاحظ أن width:1% مطلوب لتجنب انهيار الخلية.

Answer 3

إذا تم إنشاء عناصر القائمة الخاصة بك ديناميكيًا (لذلك لا تعرف عدد العناصر التي ستكون مسبقًا) ، فيمكنك إضافة ملف style="width:xx" تنسب إلى liق (أو في <style> في الأعلى ... أو أينما كنت ، حقا). أين xx يجب إما عن طريق width_of_parent_div_in_px/number_of_elements+'px', ، أو 100/number_of_elements+'%'. ال liيجب أن يكون s أيضا blockعناصر المستوى ، و floatإد left.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

العرض: 18 ٪ قد يكون على حق إذا كان لديك 5 عناصر عبر ، وهو ما يمثل الحدود والحشو. ولكن سيختلف ذلك بسبب عدد العناصر التي لديك ، ومقدار الحشو ، إلخ.

Answer 5

إذا كنت منفتحًا على استخدام FlexBox ، فليس من الصعب القيام به. الائتمان الكامل للرمز الذي أنا على وشك نشره يذهب إلى حيل CSS لأن هذا هو CSS.

فيما يلي مثال يتضمن بادئات البائع.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

المشكلة الوحيدة مع FlexBox هي إذا كنت بحاجة إلى دعم IE 9 وما يلي ، وإلا ، لا أرى أي سبب لعدم استخدام FlexBox. تستطيع عرض دعم المتصفح لـ Flexbox هنا.

Answer 6

هذا ما نجح بالنسبة لي:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}