个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
下面是我用来显示一些内容的 html。我了解到使用 "position:absolute" 时超链接中不会显示下划线，这就是我添加样式 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>最佳答案
我已经重构了你的HTML，不需要使用字体标签和不必要的<div> s 在您的 HTML 中。此外，最好将所有样式都放在 <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>关于html - 使用跨度和位置 :absolute 时整行的下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32110021/
24
4
0
这就是我现在正在做的事情。我在设计中使用 LESS CSS。我需要在指定输入之间放置 2 个跨度。所有元素的宽度都应为 100%。跨度应始终为 20px 宽度输入宽度可以根据屏幕宽度进行更改。谁能帮帮
我有一个包含文本和输入字段的跨度。我想知道是否可以让文本左对齐，输入字段右对齐。 NAME: .textBox{ display:inline-block; width:450px
我有这个按钮，我想让它在我点击“选择”时调用方法，在我点击“更改”时调用另一个方法: Select Change 我尝试输入 (click)="method()"，但没有成功。我很
我正在开发聊天应用程序 (cordova)，当我要在无法输入的表情符号后输入文本时，我在这段代码中遇到了问题 https://output.jsbin.com/radaref This i
很抱歉，如果这是一个非常愚蠢的问题，但我是一名开发人员，目前我的设计技能很少，我在个人网站上工作并且遇到了一个小问题。 我有一个带 ul 的顶部导航和 li元素。这些元素包含链接 . 跨度仅在链接悬
fiddle :https://jsfiddle.net/burz4g8s/4/ 我的 HTML 包含多行双按钮对。服务器端应用程序在 JSP 循环中输出按钮，所以我无法控制各个按钮——我不能使用 d
TextView.setLetterSpacing允许设置字母间距/字符间距。 有没有对应的CharacterStyle / span class允许在 TextView? 中的文本子集上设置字母间距
如何使洋红色矩形比红色矩形短 6 倍？ GridLayout { id: gridLayout anchors.fill: parent flo
我最近开始使用 Twitter Bootstrap，但我似乎无法理解 span 的作用以及为什么会有不同的编号 span，例如 span4、span12？什么是偏移量以及它们何时使用？ (有时与跨度一
我正在尝试构建一个 jQuery 函数来计算跨度中的总数 var sumnormaltotal = 0; $('span[id^="normaloffertotalspan"]').each(func
我想知道haskell如何评估以下表达式。 span (`elem` ['A'..'Z']) "BOBsidneyMORGANeddy" 结果是 ("BOB","sidneyMORGANeddy")
我有三个词，我想在第一个空格之后的内容周围添加一个跨度，所以 hello world 变成: hello world 和: hello world again 变成: hello world agai
我正在寻找纯 CSS 解决以下问题的方法。 考虑以下 HTML: Some text Some text 两者都是 正在显示元素 inline-block .如何在第二个 的左侧
如何将 Span 放置在其容器的底部？ 我目前拥有的:http://jsfiddle.net/wRbax/2/ 我希望 .box 始终位于 .td 的底部 CSS .td { vertical
我试图在 li 中 float 两个 span。左跨度将有我的标签，在右跨度内我将构建一个具有嵌套跨度的图形。我有基本结构，但 chrome 将数字放在左侧跨度的末尾。我该如何解决这个问题？ HTML
我有一个像这样的 JavaScript 变量: var text = "A businessman should be able to manage his business matters"; 我想
一些内容可编辑的框与其他框重叠，因此并非所有框都是可编辑的。我想保留与跨度位置中心对齐的文本，如下所示。我如何实现这一点？ span { margin: auto; text-alig
我正在使用 WYSIWYG (InnovaEditor) 来编辑我网站上的内容，它适用于 Chrome、IE，主要适用于 Firefox，但 FF 有一个稍微令人讨厌的问题。我将 span 标签插入到
这是我的 html: Settings Export Import 和CSS: span.button { float:right; margin-righ
这里是问题所在:http://jsfiddle.net/STG22/3/ 我希望 span 不会分成两个不同的行(就像上面示例中的第三行一样)。我该怎么做？ CSS: span { backg
我是一名优秀的程序员,十分优秀！