8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 使用 HTML 和 CSS 创建水平线的正确方法是什么？

使用 HTML 和 CSS 创建水平线的正确方法是什么？

Reuel Ribeiro 2月前
186 0

我需要在某个块后画一条水平线，有三种方法可以做到：1）定义一个 h_line 类并向其添加 css 特性，如#css.hline { width:100%; height:1px; background: #fff...

我需要在某个块后画一条水平线，有三种方法可以做到这一点：

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 class="block_1">Lorem</div> <hr />

伪类 after 一样使用它 

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

哪种方式最实用？

帖子版权声明 1、本帖标题：使用 HTML 和 CSS 创建水平线的正确方法是什么？
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Reuel Ribeiro在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    这取决于要求，但许多开发人员的建议是让你的代码尽可能 简单 。因此，使用简单的 \'hr\' 标签和 CSS 代码。

  • 引用 3楼

    居中线，中间有文本，使用上边距和下边距： 

    .lineL {
  width: calc(32vw - 24px);
  margin-right:2vw;
  margin-bottom:5px;
  height: 0;
  border: 1px solid #a5a5a5;
  display:inline-block;
}
.lineR {
  width: calc(32vw - 24px);
  margin-left:2vw;
  margin-bottom:5px;
  height: 0;
  border: 1px solid #a5a5a5;
  display:inline-block;
}
.line {
  margin-bottom:40px;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  width:calc(70vw - 24px);
}
    <html>
<body>
  <button>Login</button>
  <div class="line">
    <div class="lineL"></div>
    <div style="display:inline-block;width:24px;">OR</div>
    <div class="lineR"></div>
  </div>
  <button>Logout</button>
</body>
</html>
  • 引用 4楼

    这是一个相对简单的例子并且对我来说很有用。 

    hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

    资源： https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html

  • 引用 5楼 

    hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
    <div>Hello</div>
<hr/>
<div>World</div>
    强调文字
  • Kobi 2月前 0 只看Ta
    引用 6楼

    我的简单解决方案是使用 css 为 hr 设置样式，使其具有零顶部和底部边距、零边框、1 像素高度和对比背景颜色。这可以通过直接设置样式或定义类来实现，例如： 

    .thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
  • 引用 7楼

    我想要一条长虚线，所以我用了这个。 

    .dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}
    <div class="dash"></div>
  • 引用 8楼

    如果您确实想要 主题休息 ，请务必使用标签 <hr> 。

    如果你只是想要一条设计线，你可以使用类似 css 类的东西 

    .hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

    并像使用它一样 

    <div class="block_1 hline-bottom">Cheese</div>
  • 引用 9楼

    在 HTML5 中，该 <hr> 标签定义主题分隔符。在 HTML 4.01 中，该 <hr> 标签表示水平规则。

    http://www.w3schools.com/tags/tag_hr.asp

    因此，在定义之后，我更喜欢 <hr>

  • 引用 10楼 

    .line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
    <html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
  • 引用 11楼

    @RyanBayne ...但是但是但是... hr = 水平线，而不是线:)

  • 引用 12楼

    标题说水平线和

    is that so I up this. Title maybe should have read styled horizontal line.
  • 引用 13楼
    is valid HTML5. It used represent a horizontal rule, but is now defined in semantic terms as a thematic break between content. Most browsers will still display it as a horizontal line unless told otherwise. Source: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
  • 引用 14楼

    我会选择语义标记，使用 <hr/> .

    除非您想要的只是边框，否则您可以使用填充、边框和边距的组合来获得所需的边界。

  • 引用 15楼

    @JacquesMarais，不确定这是否有必要，因为它是一个没有定义宽度的块元素，所以无论如何它都会跨越整个容器的宽度。

  • 引用 16楼

    注意：如果您希望它始终位于页面的中心，请使用 margin: 1em auto。

  • 引用 17楼 

    hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
    <div>Hello</div>
<hr/>
<div>World</div>

    操作方式如下 html5boilerplate ： 

    hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
  • 引用 18楼

    在 HTML5 中

    element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section).
返回
作者最近主题：