在第二行缩进>> [[文字
我需要同时使用光盘和list-style-type: lower-roman;来设置列表的样式。
但是因为我正在使用content: "•";创建光盘效果,所以第二个
<li>文本的行未对齐。
有更简单的方法吗?
例如:
i•Some list text which goes onto the second line //need this to be in line with the text above i sub list text1 ii sub list text2
我当前正在使用
ul>li:before { content: "•"; } ol{ margin-left: 24px; } ol, ul{ list-style-type: lower-roman }
<ul> <li>Some list text which goes onto the second line <ol> <li>sub list text1</li> <li>sub list text1</li> <ol> </li> </ul>
我需要同时使用光盘和list-style-type:lower-roman;设置列表样式。但是因为我使用的是内容:“•”;要创建光盘效果,
文本的第二行不对齐。 ...
] >>
您需要使用列表样式位置
ul>li:before { content: "•"; margin-right:5px; } ul{ list-style-position: inside; } ol{ margin-left: 24px; } ol, ul{ list-style-type: lower-roman }
<ul> <li>Some list text which goes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second line <ol> <li>sub list text1</li> <li>sub list text1</li> <ol> </li> </ul>
您可以将padding-left应用于ul > li,使其为position: relative和:before伪元素position: absolute,然后使用left:根据需要调整确切位置:
ul>li { padding-left: 15px; position: relative; } ul>li:before { content: "•"; position: absolute; left: 5px; } ol { margin-left: 24px; } ol, ul { list-style-type: lower-roman }
<ul> <li>Some list text which goes onto the second line. Some list text which goes onto the second line. Some list text which goes onto the second line <ol> <li>sub list text1</li> <li>sub list text1</li> <ol> </li> </ul>