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


88

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

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

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

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

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

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

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


1
คุณควรใช้แท็กหัวเรื่อง (h1, h2, h3, ... ) สำหรับชื่อเรื่อง มันถูกต้องตามความหมายมากกว่า
Pickels

1
ใช่คุณพูดถูก Pickels ขอบคุณทุกคนสำหรับความช่วยเหลือของคุณ นี่คือ css สุดท้ายของฉัน มันใช้งานได้ดีสำหรับฉัน: <style> h4 {display: inline-block; ซูม: 1; * แสดง: อินไลน์; ขอบ: 0px; ความสูง: 25px; } </style>
Kelvin

คำตอบ:


142

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

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


สำหรับสิ่งที่มันคุ้มค่า IE7 inline-blockไม่สนับสนุน
Scott Cranfill

Np. @Scott: ฉันไม่เห็นสิ่งนั้นใน W3 - นี่คือสิ่งที่พวกเขาพูด:Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
casraf

2
@henasraf - @ Scott ถูกต้องฉันใช้ไม่ได้เพราะ Quicks เช่นกัน: quirksmode.org/css/display.html
Nick

2
อ้างจาก:IE 6/7 accepts the value only on elements with a natural display: inline.
casraf

1
Ahah ฉันเดาว่ามันจะได้ผลถ้าใช้ไปspanแล้ว ขอบคุณสำหรับข้อมูล henasraf
Scott Cranfill


13

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

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

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

5

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

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


0

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

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


0

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

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

-4

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


3
หรือเพิกเฉยต่อเสียงครวญครางของฉันและใช้คำตอบของ henasraf :)
Seth Petry-Johnson

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