ป้องกัน linebreak หลังจาก </div>

มีวิธีป้องกันการแตกบรรทัดหลัง div ด้วย css หรือไม่?

ตัวอย่างเช่นฉันมี

<div class="label">My Label:</div>
<div class="text">My text</div>

และต้องการให้แสดงเช่น:

ป้ายกำกับของฉัน: ข้อความของฉัน

display:inline;

หรือ

float:left;

หรือ

display:inline-block; - อาจใช้ไม่ได้กับทุกเบราว์เซอร์

จุดประสงค์ของการใช้divที่นี่คืออะไร? ฉันขอแนะนำspanเนื่องจากเป็นองค์ประกอบแบบอินไลน์ในขณะที่ a divเป็นองค์ประกอบระดับบล็อก

โปรดทราบว่าแต่ละตัวเลือกด้านบนจะทำงานแตกต่างกัน

display:inline;จะเปลี่ยนdivให้เทียบเท่ากับไฟล์span. มันจะเป็นผลกระทบจากmargin-top, margin-bottom, padding-top, padding-bottom, heightฯลฯ

float:left;เก็บdivเป็นองค์ประกอบระดับบล็อก จะยังคงใช้พื้นที่เหมือนกับว่าเป็นบล็อกอย่างไรก็ตามความกว้างจะพอดีกับเนื้อหา (สมมติว่าwidth:auto;) อาจต้องใช้เอclear:left;ฟเฟกต์บางอย่าง

display:inline-block;เป็นตัวเลือก "ที่ดีที่สุดของทั้งสองโลก" divจะถือว่าเป็นองค์ประกอบบล็อก มันตอบสนองต่อการทั้งหมดของmargin, paddingและheightกฎระเบียบที่เป็นไปตามคาดสำหรับองค์ประกอบบล็อก อย่างไรก็ตามถือว่าเป็นองค์ประกอบแบบอินไลน์เพื่อจุดประสงค์ในการจัดวางภายในองค์ประกอบอื่น ๆ

อ่านข้อมูลเพิ่มเติม

.label, .text {display: inline}

แม้ว่าคุณจะใช้สิ่งนั้นคุณอาจเปลี่ยน div เป็น span ได้เช่นกัน

โดยค่าเริ่มต้น DIV เป็นองค์ประกอบการแสดง BLOCK ซึ่งหมายความว่ามันอยู่ในบรรทัดของตัวเอง หากคุณเพิ่มการแสดงคุณสมบัติ CSS: อินไลน์มันจะทำงานตามที่คุณต้องการ แต่บางทีคุณควรพิจารณา SPAN แทน?

<span class="label">My Label:</span>
<span class="text">My text</span>

divองค์ประกอบองค์ประกอบของบล็อกได้โดยเริ่มต้นที่พวกเขาใช้ upp ความกว้างใช้ได้เต็มรูปแบบ

วิธีหนึ่งคือเปลี่ยนให้เป็นองค์ประกอบแบบอินไลน์:

.label, .text { display: inline; }

สิ่งนี้จะมีผลเช่นเดียวกับการใช้spanองค์ประกอบแทนdivองค์ประกอบ

อีกวิธีหนึ่งคือการลอยองค์ประกอบ:

.label, .text { float: left; }

สิ่งนี้จะเปลี่ยนวิธีการกำหนดความกว้างขององค์ประกอบดังนั้น thwy จะกว้างเท่ากับเนื้อหาเท่านั้น นอกจากนี้ยังจะทำให้องค์ประกอบลอยอยู่ข้างๆกันคล้ายกับภาพที่ไหลอยู่ข้างๆกัน

คุณยังสามารถพิจารณาเปลี่ยนองค์ประกอบต่างๆ divองค์ประกอบที่มีไว้สำหรับหน่วยงานเอกสารผมมักจะใช้labelและspanองค์ประกอบสำหรับการสร้างเช่นนี้:

<label>My Label:</label>
<span>My text</span>

div ใช้เพื่อสร้างโครงสร้างให้กับเว็บไซต์หรือมีข้อความหรือองค์ประกอบจำนวนมาก แต่ดูเหมือนว่าคุณจะใช้เป็นป้ายกำกับคุณควรใช้ span ซึ่งจะทำให้ข้อความทั้งสองติดกันโดยอัตโนมัติและคุณไม่จำเป็นต้องเขียน รหัส css สำหรับมัน

และแม้ว่าคนอื่นจะบอกให้คุณลอยองค์ประกอบก็ควรที่จะเปลี่ยนแท็ก

ฉันไม่คิดว่าฉันเคยเห็นเวอร์ชันนี้:

<div class="label">My Label:<span class="text">My text</span></div>

<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

ลองใช้clear:noneแอตทริบิวต์ css กับป้ายกำกับ

.label {
     clear:none;
}

ลองลอย div ของคุณใน css

.label {
float:left;
width:200px;
}
.text {
float:left;
}

ฉันประสบความสำเร็จหลายครั้งในการรับ div โดยไม่มีการแบ่งบรรทัดหลังจากนั้นโดยการเล่นกับแอตทริบิวต์ float css และแอตทริบิวต์ width css
แน่นอนว่าหลังจากแก้ปัญหาแล้วคุณต้องทดสอบในทุกเบราว์เซอร์และในแต่ละเบราว์เซอร์คุณต้องปรับขนาดหน้าต่างใหม่เพื่อให้แน่ใจว่าใช้งานได้ในทุกสถานการณ์

ใช้รหัสนี้สำหรับ div ปกติ display: inline;

ใช้รหัสนี้ถ้าคุณใช้ในตาราง display: inline-table; ดีกว่าตาราง

ลองใช้วิธีนี้ (ในCSS) เพื่อป้องกันการแตกบรรทัดในdivข้อความ:

white-space: nowrap;