การลบขึ้นบรรทัดใหม่หลังแท็ก <h1>?


94

ฉันมีปัญหาในการลบ<h1>เส้นแบ่งหลังแท็กเนื่องจากทุกครั้งที่พิมพ์มันจะเพิ่มตัวแบ่งบรรทัดตามหลังดังนั้นสิ่งที่ต้องการจะ<h1>Hello World!</h1> <h2>Hello Again World!</h2>พิมพ์ออกมาดังนี้:

Hello World!

Hello Again World!

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

ฉันยังต้องการให้มีช่องว่างในแนวตั้งถ้าเป็นไปได้

คำตอบ:


155

ดูเหมือนว่าคุณต้องการจัดรูปแบบเป็นแบบอินไลน์ ตามค่าเริ่มต้นh1และh2เป็นองค์ประกอบระดับบล็อกซึ่งครอบคลุมความกว้างทั้งหมดของเส้น คุณสามารถเปลี่ยนเป็น inline ด้วย css ดังนี้:

h1, h2 {
    display: inline;
}

นี่คือบทความที่อธิบายความแตกต่างระหว่างblockและinlineรายละเอียดเพิ่มเติม: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

ในการรักษาช่องว่างในแนวตั้งให้ใช้inline-blockดังนี้:

h1, h2 {
    display: inline-block;
}

9

<h1>{display: block}ตั้งค่าแท็กแล้ว เป็นองค์ประกอบระดับบล็อก ในการปิดสิ่งนี้:

{display: inline}

ตามค่าเริ่มต้นแท็ก h โดยใช้ระยะขอบช่องว่างภายในดังนั้นเราจึงต้องลบสิ่งเหล่านี้ออก
Adeel Mughal

ฉันต้องการเก็บช่องว่างแนวตั้งไว้ด้วยถ้าเป็นไปได้ฉันได้ลอง display: inline; แต่ไม่มีช่องว่างในแนวตั้งอีกต่อไป
Jack Wilsdon

1
การลบช่องว่างภายในและขอบไม่ได้ลบบรรทัดใหม่ บรรทัดใหม่เกิดขึ้นเนื่องจากเป็นองค์ประกอบระดับบล็อกซึ่งหมายความว่าจะใช้พื้นที่แนวนอนทั้งหมดที่ปรากฏ (โดยค่าเริ่มต้น) ดังนั้นหากคุณไม่ทำการลอยเปลี่ยนการแสดงผลหรือคุณสมบัติอื่น ๆ คุณจะต้องขึ้นบรรทัดใหม่หลังh*แท็กเสมอ
tkone

@JackWilsdon Ben Lee ได้อัปเดตแล้วเพื่อแสดงวิธีการรักษาแนวตั้งได้อย่างง่ายดายดังนั้นฉันจะไม่รบกวนฉันด้วยหลังจากที่คุณแก้ไข
tkone

3

ฉันเพิ่งแก้ไขปัญหานี้โดยตั้งค่าระยะขอบ h1 เป็นลบในส่วนสไตล์ html มันทำงานได้อย่างสมบูรณ์แบบสำหรับความต้องการของฉัน

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

2
วิธีนี้ใช้ได้กับการลบช่องว่างในแนวตั้งแทนการแบ่งบรรทัด
59

ฉันเข้าใจผิดในขณะที่สังเกตว่าคำตอบนี้คือสิ่งที่ฉันกำลังมองหา ทางออกที่ดีแม้ว่าจะไม่ใช่คำตอบสำหรับคำถามก็ตาม ขอบคุณต่อไป! :)
Semmel

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.