เส้นแนวนอนและวิธีที่ถูกต้องในการเขียนโค้ดใน html, css

122

ฉันต้องวาดเส้นแนวนอนหลังจากบล็อกบางส่วนและฉันมีสามวิธีในการทำ:

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

3) ใช้มันเหมือนafterpseudoclass

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

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

วิธีใดปฏิบัติได้จริงที่สุด?

html css

— ПавелТявин
แหล่งที่มา

2

ฉันคิดว่า<hr>เป็นความหมายมากที่สุด ฉันหมายความว่ามันมีไว้เพื่ออะไร?

— j08691

3

ทำไมไม่ใช้border-bottom?

— jsweazy

3

ใน HTML5 องค์ประกอบ HTML <hr> แสดงถึงการแบ่งหัวข้อระหว่างองค์ประกอบระดับย่อหน้า (ตัวอย่างเช่นการเปลี่ยนฉากในเรื่องราวหรือการเปลี่ยนหัวข้อด้วยส่วน)

— Scott Simpson

138

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;
}

— moettinger
แหล่งที่มา

3

หมายเหตุ:ใช้margin: 1em autoถ้าคุณต้องการให้อยู่ตรงกลางหน้าเสมอ

— Jacques Marais

1

@JacquesMarais ไม่แน่ใจว่าจำเป็นเนื่องจากเป็นองค์ประกอบบล็อกที่ไม่มีความกว้างที่กำหนดดังนั้นมันจะขยายความกว้างของคอนเทนเนอร์ทั้งหมด

— moettinger

65

ฉันจะไปหามาร์กอัปเชิงความหมายใช้<hr/>ไฟล์.

เว้นแต่จะเป็นเพียงเส้นขอบตามที่คุณต้องการคุณสามารถใช้การรวมกันของช่องว่างภายในเส้นขอบและระยะขอบเพื่อให้ได้ขอบเขตที่ต้องการ

— Bevacqua
แหล่งที่มา

8

<hr>เป็น HTML5 ที่ถูกต้อง ใช้แทนกฎแนวนอน แต่ตอนนี้นิยามในแง่ความหมายเป็นตัวแบ่งใจความระหว่างเนื้อหา เบราว์เซอร์ส่วนใหญ่จะยังคงแสดงเป็นเส้นแนวนอนเว้นแต่จะบอกเป็นอย่างอื่น ที่มา: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell

ชื่อเรื่องบอกว่าเส้นแนวนอนและ <hr /> คืองั้นฉันก็ขึ้นสิ่งนี้ ชื่อเรื่องควรอ่านแนวนอนที่มีสไตล์

— Ryan Bayne

11

ใน HTML5 <hr>แท็กจะกำหนดตัวแบ่งหัวข้อ ใน HTML 4.01 <hr>แท็กแสดงถึงกฎแนวนอน

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

ดังนั้นหลังจากนิยามแล้วฉันจะชอบมากกว่า <hr>

— bpoiss
แหล่งที่มา

10

หากคุณต้องการแบ่งเฉพาะเรื่องจริงๆให้ใช้<hr>แท็ก

ถ้าคุณต้องการแค่สายการออกแบบคุณสามารถใช้บางอย่างเช่นคลาส css

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

และใช้มันเช่น

<div class="block_1 hline-bottom">Cheese</div>

— Serv-Inc
แหล่งที่มา

6

ฉันอยากได้เส้นประยาว ๆ ก็เลยใช้อันนี้

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

}

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

ขยายข้อมูลโค้ด

— Alia
แหล่งที่มา

5

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

ขยายข้อมูลโค้ด

— Nadeem Qasmi
แหล่งที่มา

คุณยังไม่ได้ตอบคำถาม "ข้อใดใช้ได้จริงที่สุด"

— Brian Tompsett - 汤莱恩

1

วิธีง่ายๆของฉันคือจัดรูปแบบ hr ด้วย css ให้มีขอบบนและล่างเป็นศูนย์เส้นขอบศูนย์ความสูง 1 พิกเซลและสีพื้นหลังที่ตัดกัน ซึ่งสามารถทำได้โดยการตั้งค่าสไตล์โดยตรงหรือโดยการกำหนดคลาสตัวอย่างเช่น:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

— FredG
แหล่งที่มา

1

มันจะขึ้นอยู่กับความต้องการ แต่ข้อเสนอแนะนักพัฒนาจำนวนมากที่จะทำให้รหัสของคุณเป็นง่ายๆเป็นไปได้ ดังนั้นให้ใช้แท็ก "hr" และโค้ด CSS แบบง่ายๆ

— รามประสาท
แหล่งที่มา

0

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

<div>Hello</div>
<hr/>
<div>World</div>

ขยายข้อมูลโค้ด

เน้นข้อความ

— พี่
แหล่งที่มา

โปรดเพิ่มความคิดเห็นเพื่ออธิบายคำตอบของคุณ

— Barthy

0

นี่เป็นตัวอย่างที่ค่อนข้างง่ายและใช้ได้ผลสำหรับฉัน

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

แหล่งข้อมูล: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html