القائمة الأفقية CSS - متباعدة بالتساوي؟
-
05-07-2019 - |
سؤال
لدي قائمة CSS قياسية ، مصنوعة من علامات UL و LI. أحتاجهم إلى تغطية الصفحة بأكملها ، أفقياً (وليس حالتي الحقيقية ، لكنني سأخذ هذا لتبسيط الموقف). ومع ذلك ، يتم إنشاء العناصر ديناميكيًا ، ولذا فإنني غير قادر على ترميز أي من عناصر LI ، ولا هوامش.
لقد رأيت حلولًا تستخدم JavaScript لتعيين هذه القيم ، لكنني أحب حقًا تجنبها.
أخيرًا ، لقد رأيت حلًا جيدًا للغاية
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
سيؤدي ذلك إلى إنشاء السلوك المطلوب في معظم المتصفحات ... باستثناء IE.
أيه أفكار؟
تحرير: شكرا على الردود. ومع ذلك ، نظرًا لأن الرمز الذي ينشئ العناصر ليس لي ، فأنا غير قادر على تعيين أنماط مضمنة عند إنشائها دون استخدام JavaScript لاحقًا.
المحلول
لا يمكنك ضبط ارتفاع أو عرض عنصر مضمّن. http://www.w3.org/tr/css2/visudet.html#inline-width
محاولة display:inline-block;
هنا هو الإصلاح IE:
display:inline-block;
zoom:1;
*display:inline;
نصائح أخرى
إذا كنت تريد السماح للعنصر بالحصول على المساحة المتاحة بأكملها ، فلا داعي لتحديدها مسبق عرض عناصر القائمة (بالطبع ، سيساعد في تغيير حجم عناصر LI على قدم المساواة). يمكنك حل هذه المشكلة من خلال العمل على display
منشأه.
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
لاحظ أن width:1%
مطلوب لتجنب انهيار الخلية.
إذا تم إنشاء عناصر القائمة الخاصة بك ديناميكيًا (لذلك لا تعرف عدد العناصر التي ستكون مسبقًا) ، فيمكنك إضافة ملف 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
.
#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 عناصر عبر ، وهو ما يمثل الحدود والحشو. ولكن سيختلف ذلك بسبب عدد العناصر التي لديك ، ومقدار الحشو ، إلخ.
إذا كنت منفتحًا على استخدام 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 هنا.
هذا ما نجح بالنسبة لي:
#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;
}