html - 如果值存在或不存在,如何添加固定下划线?

标签 html css

<分区>

我有一个 html 文件,我想要一个下划线作为值。为此,我在 html 中添加了 标签和 text-decoration。 这些 utext-decoration 只有在值存在时才会起作用。 我的要求是在值存在或不存在时添加固定下划线(在下面示例的 H1 标记中)。

html示例如下:

<!DOCTYPE html>
<html>

    <head>
        <title>Inline styles</title>
    </head>

    <body>
        <div>Text:
             <h1>Big Heading</h1>
        </div>
    </body>

</html>

最佳答案

只是为了添加我的评论作为答案,您可以使用一个固定宽度的 div 和一个 border-bottom CSS 属性来给它一个下划线外观。

div#underline {
    width:300px;
    border-bottom:1px solid black;
}

<div>Text: <div id="underline"></div></div>

显然,您可以根据需要更改宽度,也可以更改边框样式以适应。您还可以使用不间断空格 ( ) 进一步填充 div。

JSFiddle

关于html - 如果值存在或不存在,如何添加固定下划线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33820179/

相关文章:

jquery - 网页动态生成下拉?

html - 为什么我一直收到无法加载资源 : Error everytime I run my application?

javascript - 如何使用这些 stackoverflow 答案保存应用了过滤器的 Canvas ?

html - 如何使CSS下拉菜单成为下拉菜单

jquery - 遍历 slider 更改时发生的所有类

html - 如何让 div 覆盖网页的整个宽度,而不仅仅是视口(viewport)?

css - 翻转时图像倾斜 - 无法弄清楚为什么

javascript - 在 D3 中缩小时如何按时间尺度对图标进行聚类?

html - 我怎样才能让我的 Bootstrap 导航栏背景颜色跨越我页面的整个宽度?

html - 针对移动设备和 CSS @font-face 进行优化