Question

在网页上，我有以下标记：

<h3>Title Goes here</h3>
<a href="...">Link goes here</a>
<h3>Next title</h3>
<a href="...">Next link</a>

其中一些链接的文本很长，跨越多行。我希望发生以下情况：

第一个标题的链接与第二个标题之间有间距。
跨越多行的链接包含所有行，但第一行缩进。

目前实现这一目标的方法是通过以下CSS：

h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
    margin: 0px 30px 20px 5px;
    line-height:1.4;
    display: inline-block;
    padding-left: 10px;
    text-indent: -10px;
}

问题出现了，因为我们的链接具有以下格式：

a {
    color: #900;
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

a:hover {
    border-bottom: 1px solid #900;
}

由于标题下的链接有display: inline-block，因此border-bottom不会在每行的文本下面，而是在链接生成的整个框下面。我不确定是否有办法在这里得到我想要的东西，因为display:inline-block似乎需要获得我想要的边距和缩进，但是border-bottom只能用于内联元素。

有没有办法让我的蛋糕加上下划线，而不改变标记（例如用<a>包裹<p>元素）？

Answer 1

你不应该只需要将线高改为低于1.4吗？如果没有，请提供视觉效果。

Answer 2

我能够使用position: relative和一个负边距来实现缩进效果，而不需要使用text-indent，这需要内联块。我为标题而不是链接添加了边距，以便创建必要的间距。 CSS如下：

h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
    line-height:1.4;
    margin-left: -10px;
    position: relative;
    left: 15px;
}

a+h2, a+h3, a+h4, a+h5, a+h6 {
    margin-top: 20px;
}

多线链接格式化难题

2 个答案: