Html 如何使用css使文本与列表中的文本垂直对齐
我正在为我的列表使用支票的背景图像。问题在于,出于某种原因,列表项下一行的文本与上面的文本不对齐,而是与检查图像对齐。我试过使用Html 如何使用css使文本与列表中的文本垂直对齐,html,css,Html,Css,我正在为我的列表使用支票的背景图像。问题在于,出于某种原因,列表项下一行的文本与上面的文本不对齐,而是与检查图像对齐。我试过使用列表样式position:outside但它似乎不起作用 这是我的密码: li{ 列表样式:无; 边缘底部:0.5em; 文本缩进:1.2米; 背景图片:url(https://placehold.it/15x15); 背景重复:无重复; 字母间距:1px; 字号:200; 字体大小:12px; 列表样式位置:外部; 线高:1.2; } .剩下的清单{ 宽度:50%;
列表样式position:outside代码>但它似乎不起作用
这是我的密码:
li{
列表样式:无;
边缘底部:0.5em;
文本缩进:1.2米;
背景图片:url(https://placehold.it/15x15);
背景重复:无重复;
字母间距:1px;
字号:200;
字体大小:12px;
列表样式位置:外部;
线高:1.2;
}
.剩下的清单{
宽度:50%;
浮动:左;
文本对齐:左对齐;
}
.对{
宽度:50%;
浮动:对;
文本对齐:左对齐;
}
- 提高清晰度
- 检查格式
- 改进逻辑流程
- 消除无关词
- 验证是否遵守文体指南
问题在于您使用的是文本缩进
,它只会调整文本的第一行
文本缩进属性指定在元素文本内容的第一行开始之前应保留多少水平空间
文本缩进()
要修复此问题,请对CSS进行以下修改:
- 删除
文本缩进:1.2em代码>来自li
- 添加
左侧填充:1.2em代码>至li
这会将填充
应用到li
的整个左侧,将内容推到另一侧,并允许背景图像
使用空格
li{
列表样式:无;
边缘底部:0.5em;
左侧填充:1.2米;
背景图片:url(https://placehold.it/15x15);
背景重复:无重复;
字母间距:1px;
字号:200;
字体大小:12px;
列表样式位置:外部;
线高:1.2;
}
.剩下的清单{
宽度:50%;
浮动:左;
文本对齐:左对齐;
}
.对{
宽度:50%;
浮动:对;
文本对齐:左对齐;
}
/*添加以使问题在代码段中可见*/
.左检查表,.右检查表{
填充:0;
宽度:30%;
}
- 提高清晰度
- 检查格式
- 改进逻辑流程
- 消除无关词
- 验证是否遵守文体指南
这里是另一个解决方案,您可以使用之前的伪元素和内容,而不是列表样式类型✔';代码>
.list{
背景#154B99;
显示器:flex;
颜色:白色;
宽度:70%;
保证金:0自动;
柔性包装:包装;
}
保险商实验室{
弹性:1;
列表样式类型:无;
}
李{
位置:相对位置;
字母间距:1px;
左侧填充:10px;
}
李:以前{
内容:'✔';
位置:绝对位置;
左:0;
排名:0;
字体大小:12px;
转换:转换(-100%,0);
颜色:白色;
}
- 提高清晰度
- 检查格式
- 改进逻辑流程
- 消除无关词
- 验证是否遵守文体指南
Hi@chell,这里有另一个人和你有同样的问题:一个非常好解释、信息丰富且易于实施的解决方案。非常感谢,它很有效!没问题,很高兴我能帮忙。