下面是我用来显示一些内容的html。我已经了解到使用"position:absolute"时超链接中不会显示下划线，这就是我为span元素添加样式text-decoration: underline;的原因。
但是，我得到了span元素显示文本的下划线。我会链接到包含所有文本跨度的整行。
请在此处查看代码段并输出。但是，我需要在整行上加下划线。
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
text-decoration: underline; }
</style>
<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
<span style="position:absolute; top:94px; left:42px;text-decoration: underline; ">Text2</span>
<span style="position:absolute; top:94px; left:213px;text-decoration: underline; ">Text3</span>
<span style="position:absolute; top:94px; left:418px;text-decoration: underline; ">Text4</span>
</font>
</a>
</body>
</html>
我需要以下输出，但使用如上所示的span元素使用position：absolute
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
text-decoration: underline; }
</style>
<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
Text 2 Text 3 Text4
</font>
</a>
</body>
</html>
答案 0 :(得分：1)
我已经重新使用了HTML，不需要在HTML中使用字体标记和不必要的<div>。此外，最好将所有样式都放在<style>标记内，而不是内联。
我已将<a>显示为表格，并将所有跨度显示为表格单元格，以便在其下方应用完整边框，并在<a>悬停时删除边框
我还为第一个和最后一个跨度创建了特定的类，以便在它们的单元格中左右对齐它们。其他细胞将对齐中心。
下面的工作代码段。
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
#wrapper
{
padding-top:5%;
padding-left:10%;
}
a {
text-decoration: none;
display:table;
width:50%;
font-weight:normal;
font-size:12.00pt;
font-style:normal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a span {
white-space:nowrap;
display:table-cell;
border-bottom: solid 1px #0000EE;
width:30%;
text-align:center;
}
a:hover span {
border-bottom: none;
}
.first
{
text-align:left;
}
.last
{
text-align:right;
}
</style>
<div id="wrapper">
<a href="http://www.w3schools.com/html/" >
<span class="first" >Text2</span>
<span>Text3</span>
<span class="last" >Text4</span>
</a>
</div>
</body>
</html>
答案 1 :(得分：0)
您可以尝试这样做： Demo
HTML：
<p class="sans-serif">
<a href="#">
<span>Text2</span>
<span >Text3</span>
<span >Text4</span>
</a>
</p>
CSS：
a {
clear:both;
position:relative;
top:94px;
border-bottom:1px solid red;
left:42px;
text-decoration:none;
width:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a span {
clear:both;
border-bottom:1px solid red;
margin-left:95px;
}
a span:first-child {
clear:both;
border-bottom:1px solid red;
margin-left:0px;
}
答案 2 :(得分：0)
如果您想在span标记之后添加:before和:after伪类来添加下划线
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
text-decoration: underline; }
span:nth-child(2):before{
position: absolute;
content: "";
width: 500%;
right: 50%;
height: 1px;
background-color: #000;
bottom: 2px;
}
span:nth-child(2):after{
position: absolute;
content: "";
width: 500%;
left: 50%;
height: 1px;
background-color: #000;
bottom: 2px;
}
</style>
<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
<span style="position:absolute; top:94px; left:42px;text-decoration: underline; ">Text2</span>
<span style="position:absolute; top:94px; left:213px;text-decoration: underline; ">Text3</span>
<span style="position:absolute; top:94px; left:418px;text-decoration: underline; ">Text4</span>
</font>
</a>
</body>
</html>
答案 3 :(得分：0)
CSS：
a {
position:absolute;
border-bottom:1px solid red;
text-decoration:none;
}
a span {
margin-left:100px;
}
a span:first-child{
margin:0px;
}
HTML：
<p class="sans-serif">
<a href="http://www.w3schools.com/html/" >
<span>Text2</span>
<span >Text3</span>
<span >Text4</span>
</a>
</p>