发表新帖
发表新帖

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

前端 未结
关注
10 996
借酒劲吻你
借酒劲吻你 2020-12-04 08:12

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

<
相关标签:
10条回答
  • 春和景丽
    2020-12-04 08:46 

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

    0 讨论(0)
  • 名媛妹妹
    2020-12-04 08:47

    This is relatively simple example and worked for me.

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

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

    0 讨论(0)
  • 野的像风
    2020-12-04 08:48

    I wanted a long dash like line, so I used this.

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

}
    <div class="dash"></div>

    0 讨论(0)
  • 滥情空心
    2020-12-04 08:49

    My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like: 

    .thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
    0 讨论(0)
  • 渐次进展
    2020-12-04 08:52

    If you really want a thematic break, by all means use the <hr> tag.

    If you just want a design line, you could use something like the css class

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

    and use it like

    <div class="block_1 hline-bottom">Cheese</div>
    0 讨论(0)
  • 滥情空心
    2020-12-04 08:53 

    .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>

    0 讨论(0)
 看不清?
提交回复
热议问题