วิธีตั้งค่าคุณสมบัติความสูงสำหรับ SPAN

ฉันต้องการทำให้โค้ดต่อไปนี้ยืดได้ด้วยความสูงที่กำหนดไว้ล่วงหน้า

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

แต่เนื่องจากspanเป็นองค์ประกอบแบบอินไลน์คุณสมบัติ "height" จะไม่ทำงาน

ฉันลองใช้divแทน แต่มันจะขยายไปจนถึงความกว้างขององค์ประกอบด้านบน และความกว้างควรมีความยืดหยุ่น

ใครสามารถแนะนำทางออกที่ดีสำหรับสิ่งนี้ได้บ้าง?

ขอบคุณล่วงหน้า.

ให้มันเป็นdisplay:inline-blockCSS - ที่ควรปล่อยให้มันทำในสิ่งที่คุณต้องการ
ในแง่ของความเข้ากันได้: IE6 / 7 จะทำงานกับสิ่งนี้ตามที่โหมด quirks แนะนำ:

IE 6/7 ยอมรับค่าเฉพาะองค์ประกอบที่มีการแสดงผลแบบธรรมชาติ: แบบอินไลน์

ใช้

.title{
  display: inline-block;
  height: 25px;
}

เคล็ดลับเดียวคือการรองรับเบราว์เซอร์ ตรวจสอบว่ารายการเบราว์เซอร์ที่รองรับของคุณรองรับอินไลน์บล็อคที่นี่หรือไม่

นี่คือการทำให้การแสดงผล: อินไลน์บล็อกทำงานได้ในทุกเบราว์เซอร์:

ใน IE (6/7) อย่างแปลกประหลาดถ้าคุณทริกเกอร์ hasLayout ด้วย "zoom: 1" แล้วตั้งค่าการแสดงผลเป็นแบบอินไลน์มันจะทำงานเป็นบล็อกแบบอินไลน์

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

สมมติว่าคุณไม่ต้องการทำให้เป็นองค์ประกอบบล็อกคุณอาจลอง:

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

แต่ทางออกที่ง่ายที่สุดก็คือการรักษา.titleเป็นองค์ประกอบระดับบล็อกและการใช้หัวข้อแท็กที่เหมาะสมผ่าน<h1><h6>

ช่วง { display: table-cell; height: (your-height + px); vertical-align: middle; }

เพื่อให้สแปนทำงานเหมือนเซลล์ตาราง (หรือองค์ประกอบอื่น ๆ สำหรับเรื่องนั้น) ต้องระบุความสูง ฉันกำหนดช่วงความสูงแล้วมันก็ใช้ได้ดี - แต่คุณต้องเพิ่มความสูงเพื่อให้พวกเขาทำในสิ่งที่คุณต้องการ

อีกทางเลือกหนึ่งของหลักสูตรคือการใช้ Javascript (Jquery ที่นี่):

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

ทำไมคุณต้องมีช่วงในกรณีนี้? ถ้าคุณต้องการจัดรูปแบบความสูงคุณสามารถใช้ div ได้ไหม คุณอาจลองใช้ div กับdisplay: inlineแม้ว่าอาจมีปัญหาเดียวกันเนื่องจากคุณมีผลให้ทำสิ่งเดียวกันกับช่วง