Maison > interface Web > tutoriel HTML > LI 纵向排列问题_html/css_WEB-ITnose

LI 纵向排列问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:08:31
original
1687 Les gens l'ont consulté


  

        

  •     

  •     

  •     

  •     

  •   





如何让纵向排满一列自动换第二列,大虾们请执教。。。


回复讨论(解决方案)

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Untitled Document





先横向排然后排满才会下一行吧

建议可以用几个DIV。固定高度,排满后就排到第二个

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


实现了先横向排满后才排下一行。

这样的排法,在FIREFOX中会不兼容


这样就横向了

给li加个浮动对齐,你要算好li的长度跟li之间的间距要小于或等于ul的长度,如果要想排列的整齐,最好在li里面加个溢出隐藏和高度。。。

实现肯定是没问题的,只是有没有必要,而且左边排满再排右边感觉不是很怪吗?左边10个,右边1个的。

如果非按照你想法,供个思路给你,用到jquery,既然你说道右边排满再排右边,也就是整个的高度是固定的,也就可以做到左边最多排列的个数(假设10个),首先这些li统一用position:absolute;定位,然后通过jquery给前面10个导航定位i(i=0;i

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal