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

多行链接格式难题

xhtml css

burningstar4 · 技术社区 · 15 年前

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

<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 回复 | 直到 15 年前

meder omuraliev 15 年前

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

burningstar4 15 年前

我可以使用 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;
}

推荐文章

Luis Pavez · 在actionListener完成之前更新组件

7 年前

mike · 使用类似封送处理的编码器操纵HTML

7 年前

ajaysheoran2323 · 如何使网站多语言[关闭]

7 年前

Hanlei Price · 标记验证

7 年前

Irum · 获取错误:UI指令无法强制转换到组织。素数面。模型菜单菜单元素

7 年前

curiousToKnow · 如何从xhtml获取文本

7 年前

zinon · XHTML渲染生成空pdf文件

8 年前

saurabh · 如何在一个页面中使用多个ajax日历

8 年前

Gabriel Cardoso · 更新数据后在datatable中更新

8 年前

mac wac · AngularJS的内联模板不适用于XHTML

8 年前