请教一个li中的对齐问题

2012-02-13 02:09:20 316 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

让上下级li对齐的小技巧我是一个从汽车行业转行IT的项目经理，我是Edward，如想了解更多，请关注我的公众号【转行项目经理的逆袭之路】。晚上回顾jquery代码的时候发现之前的一个坑。好友分组列表的案例应该很多人做过：原本效果是这样的，因为用的是ul,li左侧对不齐，不理想。查了不少地方才找到： /* 去掉ul,li的默认左边距，必须一起去掉或者去掉ul的一样 */ ul,li{ margin: 0; padding: 0; } 就OK了。不好意思，我的女友是有点多。 ... 阅读详情

ul 用css定义的
希望达到的效果是，每个li中包含两个部分，所有li中的右边部分都能对齐。
现在是在CSS中将li左侧的部分加上了width，这样当左右两部分都是一行的时候显示正常。
但是当左侧部分超过width折成两行以后，显示就乱了。
下一个li并没有换行，而是在上一个li右侧的下方显示。

请教应如何设置css，可以让每个li都单独占一样，或者是让一个li中的左右两部分使用相同的高度。

...全文

Jetson Nano系统重装的艺术：从格式化到烧录的深度解析本文详细解析了Jetson Nano系统重装的完整流程，从SD卡格式化到系统镜像烧录的进阶技巧，包括硬件选择、软件准备、常见问题处理及深度学习环境配置。特别推荐使用三星EVO Plus SD卡和官方电源以确保稳定性，适合开发者快速掌握嵌入式设备系统重装的核心技术。阅读详情

daviddb7

CSS 61,116 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

daviddb7 2012-02-17

打赏
举报

被写样式的人搞死了啊
还是用clear的方式解决了
感谢大家帮忙
对于一些实在很难搞的ul排版，直接用无边框table换掉了

小昭 2012-02-16

打赏
举报

建议你可以改用比如DIV嵌套或者是DL+DT+DD的方式，因为你现在的需求是一行是一组。下一组又是新的一行。DIV嵌套或DL+DT+DD都是一组一组的。可以满足你的需求

用上边说的clear的方法来解决也行吧。只是又浮动又要清浮动，你要保持清醒才行啊。呵呵

夜风插画 2012-02-15

打赏
举报

完全同意用clear:both;来解决类似问题!

liyoc 2012-02-14

打赏
举报

因为使用了 float 导致元素脱离了标准流，有些L2会上窜。每个li中加: clear:both;

里面的内容如果是 inline的，可以避免使用 float, 用 display:inline-block 去代替，用 text-align 去左飘右飘

daviddb7 2012-02-14

打赏
举报

[Quote=引用 2 楼 bing475879749 的回复:]

li左边部份加样式：white-space:nowrap;overflow:hidden;
[/Quote]
感谢。但是这样只是把超出的文本隐藏起来了吧。
能否有办法，在左侧变成两行以后，自动扩展右侧的高度，和左侧保持一致？

可能上面的描述不是很清楚，再说明一下
L1 R1
L2 R2
L3 R3
L可能长度不一样，所有R对齐
如果L1变成两行了，我希望的效果是
L1 R1
L1
L2 R2
L3 R3
但是现在实际显示出来的效果是
L1 R1
L1 L2 R2
L3 R3

daviddb7 2012-02-14

打赏
举报

[Quote=引用 4 楼 liyoc 的回复:]

因为使用了 float 导致元素脱离了标准流，有些L2会上窜。每个li中加: clear:both;

里面的内容如果是 inline的，可以避免使用 float, 用 display:inline-block 去代替，用 text-align 去左飘右飘
[/Quote]
这个用的地方还比较多，所以每个li加不太现实。
我看了一下，确实是使用了float:left, display:block
能否将float:left改成text-align:left来解决这个问题？

bing475879749 2012-02-13

打赏
举报

li左边部份加样式：white-space:nowrap;overflow:hidden;

oggmm 2012-02-13

打赏
举报

看得晕看不懂

请教一个li中的对齐问题

相关推荐