在HTML中,我正在列出一个无序列表:
Fruit: Apple, Banana, Cherry, Durian...
我将“Fruit:”这个词视为生成的内容。我希望列表能够换行,以便第二行与第一个“Apple”齐平。
我目前的尝试是here。我已经加入了一种背景颜色,只是为了突出一种奇怪的接近但没有雪茄的间距。
答案 0 :(得分:0)
这可能不是确切正确的方法,但只需将-4em更改为-2.2em似乎就可以完成。不确定它如何跨浏览器或字体大小更改进行测试,但它可以作为一个开始:
li:first-child:before {
content: 'fruits: ';
margin-left: -2.2em;
}
更新:当字体大小增加或减少时,此方法会崩溃。
答案 1 :(得分:0)
您需要的通常是使用定义列表。你需要相应地设计它。
<dl>
<dt>Fruit:</dt>
<dd>Apple</dd>
<dd>Banana</dd>
</dl>
答案 2 :(得分:0)
好的,here's what I came up with。它使用定位而不是边距,这似乎有点难看,但它确实有效。我仍然愿意接受其他解决方案。
相关部分:
ul {
margin: 0 0 0 4em;
padding: 0;
position: relative;
}
li {
margin: 0;
padding: 0;
display: inline;
background-color: #ccc;
list-style: none;
}
li:first-child:before {
content: 'Fruit: ';
position: absolute;
left: -3em;
}