Question

我无法在此更改html，但可以编辑css并需要设置样式以匹配现有网站。在现有网站上，他们没有足够长的标题来包装。但现在他们这样做了。

我有一个带有DT内部链接的DL。我使用：before元素来应用箭头＆gt;并且所有工作都很好，除非文本换行到多行时它没有正确对齐。

我希望第二行的文本（以及文本增长时的所有其他文本）与第一行对齐。无论文本右侧有多少文字，我都希望箭头能够独立出来。

<dl class="clearfix">
<dt class="title">
    <a href="#">The Art of Lauhala (Pandanus Leaf) Weaving by Pohaku Kahoohanohano - Honokohau, Maui</a> 
</dt>

Link to Fiddle

Answer 1

像这样更改你的CSS：

dl {
    margin: 0;
}
dt {
    vertical-align:top;
    display:inline-block;
    width:calc(100% - 15px)
}
dl:before {
    vertical-align:top;
    content:"> ";
    display: inline-block;
    width:10px;
}

说明：

我为这两个元素提供了inline-block属性，然后宽度为dl:before的10px。由于我不知道容器的宽度，我假设100％，但这会给我100％+ 10px的dl:before所以我添加了calc property额外的5px来安全地玩，因此width:calc(100% - 15px)

See fiddle here并使用值

在使用DL时包装的文本上应用左边距

1 个答案: