Html 使用DL时，在换行的文本上应用左边距

我不能改变这个html，但可以编辑css，并需要它的样式匹配现有的网站。在现有网站上，他们没有足够长的标题来包装。但现在他们做到了

我有一个DL，在DT中有一个链接。我使用：before元素来应用arrow>并且所有这些都非常有效，除非文本向下换行到多行，否则无法正确对齐

我希望第二行的文本（如果文本增长，则所有其他文本）与第一行对齐。我想让箭头自己站出来，不管右边有多少文字

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

---

像这样更改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

所以我添加了一个额外的5px，以确保安全，因此

width:calc（100%-15px）

---

和值一起玩

只是粘贴一小段代码要比描述它容易得多。填充DL，浮动arrowFabio太完美了！非常感谢。