ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

horizontal line and right way to code it in html, css

2021-01-13 23:36:02  阅读:16  来源: 互联网

标签:code html height 1px right line border css


horizontal line and right way to code it in html, css

I need to draw a horizontal line after some block, and I have three ways to do it:

1) Define a class h_line and add css features to it, like

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

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

2) Use hr tag

#css
hr { width:100%; height:1px; background: #fff }

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

3) use it like a after pseudoclass

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

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

Which way is the most practical?

 

回答1

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

Here is how html5boilerplate does it:

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

 

回答2

I'd go for semantic markup, use an <hr/>.

Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.

 

HTML <hr> Tag

Definition and Usage

The <hr> tag defines a thematic语干的 break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

 

标签:code,html,height,1px,right,line,border,css
来源: https://www.cnblogs.com/chucklu/p/14274999.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有