社区
CSS
帖子详情
请教一个li中的对齐问题
daviddb7
2012-02-13 02:09:20
ul 用css定义的
希望达到的效果是,每个li中包含两个部分,所有li中的右边部分都能对齐。
现在是在CSS中将li左侧的部分加上了width,这样当左右两部分都是一行的时候显示正常。
但是当左侧部分超过width折成两行以后,显示就乱了。
下一个li并没有换行,而是在上一个li右侧的下方显示。
请教应如何设置css,可以让每个li都单独占一样,或者是让一个li中的左右两部分使用相同的高度。
...全文
292
8
打赏
收藏
请教一个li中的对齐问题
ul 用css定义的 希望达到的效果是,每个li中包含两个部分,所有li中的右边部分都能对齐。 现在是在CSS中将li左侧的部分加上了width,这样当左右两部分都是一行的时候显示正常。 但是当左侧部分超过width折成两行以后,显示就乱了。 下一个li并没有换行,而是在上一个li右侧的下方显示。 请教应如何设置css,可以让每个li都单独占一样,或者是让一个li中的左右两部分使用相同的高度。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
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
打赏
举报
回复
看得晕 看不懂
css
中
ul用left
对齐
后没有高度,Ul
Li
最后
一个
元素没有正确
对齐
我遇到了
一个
问题
,ul
中
的最后
一个
li
元素比其余所有元素都向左推进了更多。附加是
一个
屏幕截图和我的代码。Ul
Li
最后
一个
元素没有正确
对齐
我尝试过使用最后
一个
子元素,但它在Safari或Chrome
中
无法使用。#attending ul {display: in
li
ne;margin: 0 5px 0 0;padding-left: 0px;}#attending ul
li
{display: ...
让上下级
li
对齐
的小技巧
我是
一个
从汽车行业转行IT的项目经理,我是Edward,如想了解更多,请关注我的公众号【转行项目经理的逆袭之路】。晚上回顾jquery代码的时候发现之前的
一个
坑。 好友分组列表的案例应该很多人做过: 原本效果是这样的,因为用的是ul,
li
左侧对不齐,不理想。 查了不少地方才找到: /* 去掉ul,
li
的默认左边距,必须一起去掉或者去掉ul的一样 */ ul,
li
{ margin: 0; padding: 0; } 就OK了。 不好意思,我的女友是有点多。 ...
关于
li
标签浮动后文字和图片的
对齐
问题
最近在页面开发过程
中
总是遇到
li
标签浮动后文字和图片不能
对齐
的尴尬
问题
,如下图: 可以看到文字和图片底边在高度上有细微的差别,对于我这样追求完美的人来说是不可忍受的,于是尝试了很对方法来处理,比如调整
li
ne-height,修改vertical-a
li
gn,结果都不行。就在我万念俱灰想要放弃的时候,突然灵光一闪:我一直想要把文字降到图片高度,那能不能把图片升到和文字
一个
高度呢?想到就去做!于是我把样
IE6下
li
错位
问题
最近在做电子商务类网站,当做到图文效果时,遇到 IE6 下
li
错位
问题
: css部分代码: .redeem_con{ width:737px;} .redeem_con ul{ margin:0px; padding:0px;} .redeem_con
li
{ width:212px; float:left; margin:20px 12px 10px 15px;_margin:
html怎么让ui
li
居
中
,css
问题
求助,如何将导航的几个
li
元素排在一行
想不借助其它的UI库弄个导航条。不料这几个
li
死活不在一条线上,显得导航条,高度很高。有没有大佬帮助修整一下?谢谢了。HTML 代码如下`My App
li
cation.panel-primary{background-color: blue;border-color:blue;border-radius: 4px;}.panel-primary>.panel-heading{backgro...
CSS
61,119
社区成员
60,701
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章