代码之家 › 专栏 › 技术社区 › burningstar4

多行链接格式难题

xhtml css

burningstar4 · 技术社区 · 14 年前

在网页上,我有如下标记:

<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 边框底部不在每行的文本下,而是在链接生成的整个框下。我不确定是否有办法得到我想要的东西,因为 display:inline-block 似乎有必要获得我想要的页边距和缩进,但是边框底部只能与一个内联元素一起使用。

有没有一种方法可以在不改变标记的情况下(例如包装 <a> 元素与 <p> )?

2 回复 | 直到 14 年前

meder omuraliev 14 年前

你不应该只需要把线的高度改成低于1.4吗?如果没有,请提供视觉效果。

burningstar4 14 年前

我可以使用 position: relative 以及负的页边距,以实现缩进效果,而不需要使用文本缩进,这需要使用内联块。为了创建必要的间距,我在标题中添加了页边距,而不是链接。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;
}

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前