horizontal line and right way to code it in html, css
2023-09-11 14:14:18 时间
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.
相关文章
- 【POJ2409】Let it Bead Pólya定理
- 厉害了!继IT、互联网后,成都这次又要冲上“云”霄!
- 在线直播|是事实还是贩卖焦虑?IT行业也偏爱“小鲜肉”
- C语言声明知识体系总结大学霸IT达人
- IT桔子沙龙之本地生活服务O2O探路者笔记整理
- IT专业人士都没有理解的云计算,你理解了吗?
- 应对数据中心常见问题的IT监控策略
- Apache Flink - is it possible to evenly distribute slot sharing groups?
- This application failed to start because it could not find or load the Qt platform plugin "windows"
- 浅析如何升级vue-cli以及使用npm卸载包时遇到问题:npm ERR! code EEXIST(npm ERR! File exists: D:Programnodejsnode_globalvue-list.cmd - npm ERR! Move it away, and try again.)
- IT职业发展技巧:技术人员如何向管理层迈进
- 多阶段元数据一致性分析——助力北京银行实现IT运营效率提升
- 解决文件读取不到:java.io.FileNotFoundException: class path resource [xxx] cannot be opened because it does
- 无处不在的云服务和日益强大的IT团队