บล็อกการแสดงผลที่ไม่มีความกว้าง 100%

ฉันต้องการตั้งค่าองค์ประกอบช่วงให้ปรากฏด้านล่างองค์ประกอบอื่นโดยใช้คุณสมบัติการแสดงผล ฉันลองใช้อินไลน์บล็อก แต่ไม่ประสบความสำเร็จและคิดว่าฉันสามารถใช้บล็อกได้หากฉันพยายามหลีกเลี่ยงไม่ให้องค์ประกอบมีความกว้าง 100% (ฉันไม่ต้องการให้องค์ประกอบ "ยืดออก") สิ่งนี้สามารถทำได้หรือถ้าไม่ praxis ที่ดีสำหรับการแก้ปัญหาประเภทนี้คืออะไร?

ตัวอย่าง: รายการข่าวที่ฉันต้องการตั้งค่าลิงก์ "อ่านเพิ่มเติม" ที่ส่วนท้ายของแต่ละโพสต์ (หมายเหตุ: <a>แทน<span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

อัปเดต: แก้ไขแล้ว ใน CSS ใช้

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

หากฉันเข้าใจคำถามของคุณอย่างถูกต้อง CSS ต่อไปนี้จะลอยอยู่ใต้ช่วงและป้องกันไม่ให้มีความกว้าง 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}

ใช้display: table.

คำตอบนี้ต้องมีอย่างน้อย 30 อักขระ ฉันอายุ 20 แล้วนี่คือข้อมูลเพิ่มเติมเล็กน้อย

คุณสามารถใช้ได้:

width: max-content;

หมายเหตุ: การสนับสนุนมี จำกัดตรวจสอบรายละเอียดทั้งหมดของเบราว์เซอร์ที่รองรับได้ที่นี่

ฉันจะให้แต่ละแถวเป็น div ของตัวเองดังนั้น ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

จากนั้นสำหรับ CSS:

.cell{display:inline-block}

เป็นการยากที่จะให้คำตอบแก่คุณโดยไม่ต้องดูรหัสเดิมของคุณ

อีกครั้ง: คำตอบที่อาจจะสายไปหน่อย (แต่สำหรับผู้ที่พบหน้านี้เพื่อหาคำตอบ)

แทนที่จะ display:block;ใช้display:inline-block;

ลองสิ่งนี้:

li a {
    width: 0px;
    white-space:nowrap;
}

คุณสามารถใช้สิ่งต่อไปนี้:

display: inline-block;

ทำงานได้ดีกับลิงก์และองค์ประกอบอื่น ๆ

ฉันมีปัญหานี้ฉันแก้ไขได้ดังนี้:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space: nowrap" ตรวจสอบให้แน่ใจว่าส่วนย่อยของเด็ก (ถ้ามี) จะไม่ห่อขึ้นบรรทัดใหม่หากมีพื้นที่ไม่เพียงพอ

ไม่มี "white-space: nowrap":

ด้วย "white-space: nowrap":

แก้ไข: ดูเหมือนว่ามันจะใช้งานได้โดยไม่มีส่วนบล็อกลูกสำหรับฉันดังนั้นแค่นี้ดูเหมือนจะใช้ได้ดี

.parent {
  white-space: nowrap;
  display: table;
}