كيف يمكنني تحويل قائمة مع وصلات رسومية مضمنة القائمة ؟
سؤال
ونظرا لهذا HTML:
<ul id="topnav">
<li id="topnav_galleries"><a href="#">Galleries</a></li>
<li id="topnav_information"><a href="#">Information</a></li>
</ul>
و هذا CSS:
#topnav_galleries a, #topnav_information a {
background-repeat: no-repeat;
text-indent: -9000px;
padding: 0;
margin: 0 0;
overflow: hidden;
height: 46px;
width: 136px;
display: block;
}
#topnav { list-style-type: none; }
#topnav_galleries a { background-image: url('image1.jpg'); }
#topnav_information a { background-image: url('image2.jpg'); }
كيف يمكنني تحويل topnav
قائمة في مضمنة القائمة ؟
المحلول
جرب هذا:
#topnav {
overflow:hidden;
}
#topnav li {
float:left;
}
و IE سوف تحتاج إلى إضافة ما يلي:
#topnav {
zoom:1;
}
وإلا طرحت < li > العلامات سوف تمتد من التي تحتوي على < ul >.
نصائح أخرى
وثمة نهج آخر هو استخدام display: inline-block
بالنسبة li
s:
#topnav li {
display: inline-block;
}
بديل العائمة عناصر اليسار هو هذا:
#topnav li {
display: inline;
}
لا تنتمي إلى StackOverflow