带有HTML/CSS的水平线
带有HTML/CSS的水平线是一种在网页中创建水平分隔线的常见方法。HTML是一种标记语言，用于描述网页的结构和内容，而CSS是一种样式表语言，用于控制网页的外观和布局。
要创建带有HTML/CSS的水平线，可以使用HTML的<hr>元素，并通过CSS样式来定义其外观。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
height: 2px;
background-color: black;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>
</body>
</html>在上面的示例中，<hr>元素用于创建水平线。通过CSS样式，我们将边框设置为无，高度设置为2像素，背景颜色设置为黑色，并设置了上下边距为20像素，以增加与周围内容的间距。
这种带有HTML/CSS的水平线常用于网页布局中的分隔区域，可以用于将不同的内容块进行视觉上的分隔。例如，在一个网页中，可以使用水平线将标题和正文内容分隔开来，以提高可读性和视觉效果。
腾讯云提供了丰富的云计算产品和服务，其中与网页开发相关的产品包括云服务器、云存储、云数据库等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
3回答
我尝试使用CSS更改<hr>标记：
hr { color:whitesmoke}
但它根本不影响我的HTML。是否有方法将水平线的颜色更改为与使用CSS的默认颜色不同的颜色？出于性能考虑，我不想使用img (在我想用max-width: 100%的颜色中的水平线)，但是使用一些CSS规则。
浏览 3提问于2017-08-14得票数 1
回答已采纳
2回答
我正在做一个学校项目，我必须创建一条水平线，上面有一些点。 我不能将css作为单独的文件使用。css需要在HTML的标记内。 例如： 我已经创建了水平线，但无法在其上创建点。 ?
浏览 37提问于2019-05-14得票数 0
1回答
编辑I尝试使用setTimeout方法每1秒动态创建6条水平线。因此，它应该每1秒显示一组6条水平线。在这里，我把6条水平线称为组。但是，我希望每个组都是水平的，而不是垂直的。当试图追加组时，边框的宽度不足以容纳新组，请将新组追加到下一行。而且我也想要一个“皮拉尔”之间的每6条水平线，我只想创建8组水平线。下面的第一张图片是运行代码后得到的。第二个是我需要的。下面的代码是我的html、css和js代码。希望有人能帮我。提前谢谢你。
html：
<!DOCTYPE html>
<html>
<head>
<link type=
浏览 2提问于2016-11-22得票数 4
回答已采纳
3回答
在我的html页面中，我有带有css的div：
padding: 0px;
color: rgb(51, 51, 51);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
position: relative;
overflow: visible;
在这个div中，我有表单和水平线：
<hr color="#424242" size="2">
如何将此行添加到form之后？他的例子在较大的显示器上工作，但当我看到电话线上的页面在div旁边时
浏览 2提问于2012-06-27得票数 0
回答已采纳
主体背景在内联css中定义为
body {
background: radial-gradient( #EAC39F, rgb(255, 208, 160),#CB690C);
}
在真实的网站中，最新的Internet在后台显示水平线。
在IE开发工具中，我关闭了所有其他样式，尝试了2色渐变、线性渐变和其他颜色，但问题依然存在。
如何迫使IE显示没有水平线的背景？
铬显示适当的背景。此外，如果只使用此样式，则Internet将显示适当的背景。页面
<html>
<head>
<style type="text/css">
body
浏览 5提问于2014-10-08得票数 0
回答已采纳
我有一个带有单个TR标记和两个TD标记的HTML表。每个TD中有两条水平线或HR标签，并带有一些文本。因此，我希望将文本固定在TD的顶部，并将水平线固定在每列的底部。
以下是示例代码。
<html>
<body>
<table width="100%">
<tr>
<td style="text-align: left; width: 50%;">
sdbasdbmnsadbmnasdsad
浏览 0提问于2012-08-14得票数 0
回答已采纳
3回答
我正试着在图像上画一条短的水平线。例如，引号后面跟着水平线，后面跟着作者姓名。下面是我想要做的一个例子。 ? 我如何在html css中实现这一点？
浏览 22提问于2019-01-06得票数 0
如何创建一个带有3条水平线/短划线图标的bootstrap 3按钮，作为典型的web设置按钮。？
我找不到这样的ico/字形图标，那么我该如何使用css呢？
浏览 0提问于2014-12-13得票数 2
回答已采纳
0回答
我试图在css中设置一个html标题的样式，但是没有得到正确的结果，因为我的jsfiddle显示：。下面是html和css代码：
<h2><span>Heading2</span></h2>
h2{
width:100%;
text-align:center;
border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px;
}
h2 span{
padding:0 10px;
}
如何在标题前后分别放置水平线，同时控制水平线的宽度，使其不
浏览 10提问于2016-07-06得票数 18
回答已采纳
3回答
我希望在中间显示一条带有单词的水平线，使其看起来如下：
我在尝试这个，但没有用：
HTML:
<h2><span>Test</span></h2>
CSS:
h2{
font-size: 100px;
border-top: solid 1px black;
width: 100%;
height: 50px;
margin-top: 25px;
top: 50%;
z-index: 1;
}
span{
background: #fff;
padd
浏览 4提问于2013-04-15得票数 9
回答已采纳
3回答
我有两条水平线在彼此的顶部，我想把一个图像放在这些线上，但我不能用CSS实现这一点。图像隐藏在水平线后面。
这是图片
我的HTML
<div class="creambar"></div>
<div class="graybar silhouette"></div>
我的CSS
graybar { height: 20px; background-color: #343434; width: 100%; }
.graybar .silhouette { background: url("grap
浏览 0提问于2015-07-15得票数 1
2回答
我正在尝试创建一个弹出屏幕，通过单击使用Javascript中的ActionListener的按钮触发。动画基本上是一条从左向右扩展的水平线，一旦水平线达到其全部长度，它就会向上和向下展开，以创建一个弹出框。我尝试使用由javascript调用的css动画，但是它似乎只制作垂直动画，然后水平线消失了，完全忽略了垂直扩展。
init();
function init(){
document.getElementById("Btn").addEventListener("click",function(){
document.getEl
浏览 2提问于2018-01-25得票数 1
回答已采纳
我想找到在HTML/CSS/Js中绘制任意长度和-width行的最便宜(CPU)的方法。我有一种情况，我的页面除了其他HTML元素外，还会在一个页面上呈现50-200行这样的代码。我遇到的办法是：
SVG。一条是水平线，一条是垂直线。使用Javascript注入并通过参数呈现它们。
画布。一张覆盖整个屏幕的画布，背景透明。
带有border-left/border-top的DIV标记。摘要通过Javascript-方法。
其他建议？哪一个表现最好？这些方法中的任何一种是否存在兼容性问题？
浏览 2提问于2014-04-20得票数 0
回答已采纳
3回答
我正在android中构建一个富文本编辑器。为此，我使用带有contentEditable div.的webView
要添加样式，我调用JavaScript。这一切都很好用，除了我调用JavaScript插入图像或水平线时。当我使用JavaScript插入这些东西时，如果我试图按back按钮来删除图像或水平线，它不起作用。
奇怪的是，如果我首先输入任何其他字符，然后插入图像或水平线，我可以很好地删除图像/水平线，但不能删除我在图像/水平线之前输入的字符。
我试着打印出每个状态下的HTML，检查选择/范围等，但似乎找不到任何关于状态的不同之处，这可能解释为什么我不能删除图像，等等。
浏览 2提问于2013-08-07得票数 11
1回答
预期输出：一条水平线，下面是“测试”一词，没有水平滚动条。
实际输出：在下面有一个带有单词"testing“的水平线，但是有一个水平滚动条，可以用来大致移动5px，而不管浏览器的宽度如何。
这是重现问题所需的最低限度代码：
body {
margin: auto;
display: flex;
flex-direction: column;
}
hr {
min-width: 100%;
}
<html>
<body>
<section>
<hr>
<span>
testing.
</
浏览 1提问于2020-03-15得票数 1
回答已采纳
下面的示例定义了两种样式：undisplayed，它简单地设置display:none；noheight，它将Box模型中的所有高度属性设置为0px。它还根据line-height中的建议设置和overflow。
每种样式都有一个段落，上面和下面都有一条水平线。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title&g
浏览 4提问于2013-09-14得票数 4
回答已采纳
我试图将100%的水平线(规则)自动放置在
<h1>
使用CSS的标题标记。
我想看到的例子：
-剪短的8< --
引言
-剪短的8< --
我的CSS中有这样的内容：
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
在我的主HTML页面中有这样的内容：
<body class="mypage">
<
浏览 9提问于2013-04-18得票数 20
我试图弄清楚如何在h1标题的每一边显示一条带有小方格的水平线。这是我想做的事情的一个例子。我发现了一个类似的问题，使用该代码，我可以得到水平线，但不知道如何添加方格。
下面是当前的css。
.h1::before,
.h1::after {
display: inline-block;
content: "";
border-top: .3rem solid black;
width: 4rem;
margin: 0 1rem;
transform: translateY(-0.3rem);
}
<h1 class="h1&#
浏览 2提问于2022-04-05得票数 1
回答已采纳
3回答
对于一些产品，我有一些神秘的命名标签，我想用一个带有突破标签的图表来解释它们，类似这样：
也就是说，我有一种长而神秘的标签(在这个例子中，“A-253-QZ”，在现实世界中通常有8-10-12个组件)，我需要解释它的部件，"A“是指系列代号，"253”是例如，“最高速度”和"QZ“是可以接受的电池类型。
我需要动态生成这些图表，所以我更希望用HTML + CSS进行布局。
到目前为止，我最大的努力是建立一个复杂的表格，使用它的边界来绘制这些分界线-- 。看起来是这样：
我知道这是非常不理想的：
它使用HTML表格式化，这是邪恶的。
垂直线是正
浏览 3提问于2015-10-13得票数 10
回答已采纳
1回答
我希望删除在调用DT::datatable时自动显示的行阴影和水平线。
这个链接似乎有一些信息，但我不熟悉HTML和CSS，无法让它工作。
DT::datatable(iris)
浏览 2提问于2020-09-08得票数 1
回答已采纳
2回答
好的!我今天刚开始使用HTML和CSS，我认为这将是一种通过构建一些东西来学习的好方法，而不仅仅是阅读一些文本。
[ ]
因此，我决定构建一个示例导航栏。
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu"&g
浏览 4提问于2011-11-12得票数 2
回答已采纳
如何在逻辑应用程序中创建带行的html表？下面是我使用“Create HTML table”操作创建的表。enter image description here 正在获取没有行的表中的数据。如何格式化html以获得带有水平线和垂直线的表格结构？enter image description here
浏览 31提问于2019-12-06得票数 3
3回答
我有一个带有列表项图像的菜单，我想用水平线连接这些图像。
<ul>
<li>
<a href="#" title="Item1"><img src="foo/bar.png"></a>
</li>
<li>
<a href="#" title="Item2"><img src="foo/bar2.png"></a>
&
浏览 4提问于2014-09-12得票数 0
回答已采纳
1回答
我正在寻找一个解决方案，把我所有的按钮放在一条水平线上。
这种对齐有两个不同的问题：
每张卡片中的“查找更多”按钮都是在最后一行文本之后，因此不是在一条水平线上。
"Factsheet"-Button按“查找更多”按钮( <button>元素)的顺序排列，因此在默认情况下，与其他元素不处于水平线上。
我如何解决我的问题？我尝试过在CSS文件中进行一些更改(比如margin-top: auto;)，但这是行不通的。
这里是我的实际html代码片段：
<div class="card-body" style="
浏览 5提问于2020-10-08得票数 0
7回答
我试图控制下划线的粗细，然而，它似乎只是一条与文本不符的巨大水平线。如何使文本以相同的粗细加下划线：
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
浏览 0提问于2012-11-29得票数 3
1回答
我已经扩大了菜单空间，但当我向菜单添加新的菜单项时，它会变得像屏幕截图上的(垂直)。我在html css方面非常新手。我应该如何解决这个问题，使它们靠近另一个水平线？
浏览 13提问于2017-08-04得票数 0
我想显示“水平线之间的文字”，所以
我正在遵循这一链接：
但是在我们的theme.css文件中，我们已经使用了".span“& ".h2”类。
如果我在上面的链接中使用代码，它将应用于所有使用这些css类的html代码："span"，"h2“。
但我不希望这种事发生。
给我指点。
浏览 1提问于2015-04-06得票数 0
回答已采纳
1回答
我想要3个img在一条水平线上并居中，请帮忙？
我的代码: Html：
<div class="sidBilder">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCent
浏览 2提问于2018-04-05得票数 0
1回答
如何在HTML/CSS中实现图像中的虚线水平线并控制它们之间的间距？我认为javascript在这方面做的有点过头了。
我在黄色标记上遇到了这个问题，所以我需要动态的。
也许有人有个好主意。
浏览 2提问于2016-04-20得票数 0
所以我有一个我喜欢的肚脐，当窗口是全尺寸的时候，它完全位于我的两条水平线上，看起来很棒，但是当我把它调整到一个更小的角度时，单词就会在底部被切断。我想这和身高有关，但我很困惑。我也不明白为什么5%是一个神奇的数字，当它的全屏模式完全位于水平线标签的顶部？
HTML：
<center><div class="navbar"><a href= 'ask.php'>Ask a Question</a>
<a href='index.html'>
浏览 2提问于2017-08-18得票数 0
回答已采纳
我正在做一个小的RN项目，遇到了在View元素中间画一条水平线的需要。我想创建一个View元素，它被水平地分成两个相等的部分。我知道在HTML && CSS中使用CSS中的::before和::after标签是可行的，但在RN中如何做到这一点呢？
谢谢
浏览 7提问于2020-07-14得票数 0
3回答
我试图将一条横跨div的水平线居中，这条水平线可以根据其中的内容动态变化。我已经创建了一个包含内容的div。 ? 水平线应位于框的任一侧的中心，但在div内不可见。 ? html <div class ="box">
<hr/>
<div class="container">
<h3>Click on either of the two buttons!</h3>
<button class="button ">But
浏览 27提问于2019-04-30得票数 3
回答已采纳
我需要在一些块之后绘制一条水平线，我有三种方法可以做到：
1)定义一个类h_line并向其添加css特性，如
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2)使用hr标签
#css
hr { width:100%; height:1px; background: #fff }
#html
<div clas
浏览 3提问于2013-02-12得票数 134
回答已采纳
我正在从数据库中提取项目细节，并组成一个动态HTML页面，以便在顶部打印这些项目详细信息。该页面的意图是在团队或其他会议中记录有关项目的信息，我希望在项目细节之后的空间中出现行。
我可以使用哪些CSS伪标记或CSS函数组合来用水平线填充页面的空体？
浏览 3提问于2016-11-28得票数 0
回答已采纳
我使用的是带有二十四个主题的WordPress。我安装了插件AddToAny，用于在每次发布后添加浮动栏和共享按钮。到目前为止，一切都运行得很好。
但我想在帖子末尾和分享按钮之间添加一条水平线。我想我必须通过CSS来修复它，但不幸的是我不知道怎么做。
浏览 1提问于2017-11-03得票数 0
2回答
我有一个CSS问题与边框顶部/水平线之间的多个段落。这是我的密码..。
HTML：
<p>
<span class="lined">Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum
浏览 8提问于2014-04-23得票数 1
回答已采纳
在我的ASP.NET MVC核心应用程序中，我使用的是引导表类，它总是在每一行之后显示水平线。因此，我将下面的类添加到默认的site.css文件中-- Visual项目--以消除这些行。但是，纵然如您在下面看到的site.css文件已加载，水平线仍在显示。此外，正如预期的那样，如下面所示，在向site.css添加了以下自定义类之后，它在<table class="table table-borderless table-condensed table-hover">中的intellisense中显示为table-borderless，这意味着Visual确实识别了我
浏览 0提问于2016-11-23得票数 0
2回答
我需要使用CSS删除水平线。
下面是HTML：
<div id='page'>
<div id='header'>
</div>
<hr>
</div>
我试着用：
#page hr:first-child{display:none;}
但这不管用。我需要展示其他的人力资源，这样我就不能把它们全部移除。我要瞄准的就是这个。
浏览 1提问于2017-10-09得票数 2
回答已采纳
我设计了一个3栏的网站，我想在每一栏之间放置一条细的水平线。我很容易做到这一点，并在Chrome中获得了我想要的精确高度，然后我在火狐中打开它，水平线大约短了10px，IE9也是如此。这是正常的还是我做错了什么？有没有办法解决这个问题或者做得更好。这是我使用的css，html只是一个div：
#horizontal-dividing-line-news-arabnews {
border-left: solid 0.1em #0099FF;
height: 31.8em;
float: left;
color: #FFF;
margin-top:
浏览 4提问于2012-10-30得票数 1
我有问题的布局，如下图所示：
我需要用水平线装饰H2。行的大小和位置取决于H2的内容。H2的背景必须是透明的，因为背景没有纯色。
你知道怎么做这个吗？任何HTML和CSS都是允许的，没有限制。
浏览 2提问于2012-01-20得票数 1
回答已采纳
4回答
我正在尝试创建一个水平线上方的水平菜单栏使用html和css。下面是我的代码-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" co
浏览 1提问于2013-06-28得票数 0
回答已采纳
默认情况下，XYStepChart in JFreeChart实现"from“，这意味着如果我们有以下数据：(1,4)，(2,5)步骤图如下所示：
从x=1到x=2的带有y=4的水平线
x=2中的垂直线(用于值y=5)。
我想用在step图表上绘制这些数据，以定义“”的含义：
从x=0到x=1的带有y=4的水平线
x=1中的垂直线(以y=5为值)
从x=1到x=2的带有y=5的水平线
默认情况下，JFreeChart是否支持这样的概念，或者我必须自己实现它(例如，通过修改输入数据)？
也许您知道另一个支持概念的Java图表库？
浏览 1提问于2013-09-09得票数 0
回答已采纳
3回答
在我的应用程序中，我有一个带有标题和水平线的节标题。水平线是父容器的背景图像(它包含行，图像的其余部分是透明的)。标题由子元素定义。
<div class="header">
<span>Identifier</span>
</div>
我试图用CSS样式来实现的是，子元素显示的背景颜色与父元素相同，但是父容器的背景图像不应该显示在标题下面。
.header {
background-image: url("bg_image.png");
background-color: #fff;
浏览 0提问于2014-07-22得票数 1
回答已采纳
我整理了一份菜单。它的HTML如下：
<ul class="topmenu">
<li><a href="sample.html">Text 1</a></li>
<li><a href="sample.html">Text 2</a></li>
<li><a href="sample.html">Text 3</a><
浏览 3提问于2010-05-16得票数 1
回答已采纳
我希望左边的图像与右边的水平线相邻(底部对齐)。它应该是响应性的，以便线条可以根据需要更改宽度。现在，图像位于行的顶部，而不是它的旁边。
编辑:这将提供更多的澄清。橙色的部分是一个图像。细的灰色线条就是这条线。
这是HTML
<div>
<img src="image.png">
<hr>
</div>
这是CSS
img {
float:left
}
hr {
width:100%
}
如何实现这一点？HTML/CSS可以根据需要进行更改。但是应该是跨浏览器兼容和响应性的。
浏览 0提问于2012-07-11得票数 1
回答已采纳
我只在IE7上遇到这个问题，当我滚动页面时:某些部分的文本不能正确滚动，尽管有一条水平线正在滚动。
也许这是一个加载问题，但我需要解决这个问题。
技术是HTML5、bootstrap、CSS3。框架是MVC。
请看上图中的Search Again文本。
浏览 1提问于2012-09-07得票数 0
回答已采纳
2回答
我的HTML页面遇到了一个小问题。我想把我的水平线设置在左边。
到目前为止，我的线总是位于我的页面的中心，我没有达到移动这条线之间的文字。
这是我的小HTML脚本：
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
浏览 4提问于2017-02-08得票数 0
回答已采纳
我想在两对水平线之间放置一个h3标题，就像这样：
任何人都可以帮助我在html，css中实现这一点。
更新
请让我如何做到这一点，但使用锚标记(实际上是一个按钮)，我希望它是这样的：
浏览 4提问于2013-06-06得票数 2
回答已采纳
我想为我所有的页面定义一个全局宽度(例如，使用包装器，...)。如果浏览器的大小调整到此预定义的最小值以下，则会出现滚动条，并且不会进一步调整图像/文本的大小或将导航栏拆分为两条水平线。欢迎任何html/CSS代码。谢谢
浏览 6提问于2017-12-03得票数 0
既然我被允许使用静态JS和HTML标签(只有IE6支持的标签)，我如何才能使垂直线可见(与默认的水平线相同*)？
*在默认的HTML表格中，您可以看到(微妙的)水平线。我需要与那些水平线风格相同的垂直线。
浏览 0提问于2011-02-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
