SPAN के लिए ऊंचाई संपत्ति कैसे सेट करें

Question

मुझे पूर्वनिर्धारित ऊँचाई के साथ निम्नलिखित कोड बनाने की आवश्यकता है

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

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

लेकिन जबसे स्पैन इनलाइन एलिमेंट है, इसलिए "हाइट" प्रॉपर्टी काम नहीं करेगी।

मैंने प्रयोग करने की कोशिश की इसके बजाय div , लेकिन यह ऊपरी तत्व की चौड़ाई तक विस्तारित होगा। और चौड़ाई लचीली होनी चाहिए।

क्या कोई इसके लिए कोई अच्छा उपाय सुझा सकता है?

अग्रिम में धन्यवाद।

Comments

आपको शीर्षकों के लिए शीर्षक टैग (h1, h2, h3, ...) का उपयोग करना चाहिए। यह शब्दार्थ से अधिक सही है।

— पिकल्स

जी हां, आप सही पिकल हैं। आपकी मदद के लिए सभी को शुक्रिया। यह मेरी अंतिम सीएसएस है। यह मेरे लिए बहुत अच्छा काम करता है: <style> h4 {display: इनलाइन-ब्लॉक; ज़ूम: 1; * प्रदर्शन: इनलाइन; मार्जिन: 0px; ऊंचाई: 25 पीएक्स; } </ शैली>

— केल्विन

Answer 1

इसे display:inline-blockसीएसएस में दें - जो आपको चाहिए उसे करने देना चाहिए।
संगतता के संदर्भ में: IE6 / 7 इस के साथ काम करेगा , जैसा कि quirks मोड बताता है:

IE 6/7 केवल प्राकृतिक डिस्प्ले वाले तत्वों पर मान को स्वीकार करता है: इनलाइन।

Comments

इसके लायक क्या है, IE7 समर्थन नहीं करता है inline-block।

— स्कॉट क्रैनफिल

Np। 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".

— @ सच

@henasraf - @ स्कॉट की सही, मैं क्योंकि तेज गेंदबाजों का उपयोग नहीं कर सकते और साथ ही: quirksmode.org/css/display.html

— निक Craver

Quote:IE 6/7 accepts the value only on elements with a natural display: inline.

— कैसरफ

अहा, मुझे लगता है कि अगर यह एक spanसमय पर लागू होता है तो यह काम करेगा । जानकारी के लिए धन्यवाद, henasraf।

— स्कॉट क्रैनफिल

Answer 2

उपयोग

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

केवल ट्रिक ब्राउज़र सपोर्ट है। जांचें कि क्या आपके समर्थित ब्राउज़रों की सूची यहां इनलाइन-ब्लॉक को संभालती है ।

Answer 3

यह प्रदर्शन करना है: सभी ब्राउज़रों में इनलाइन-ब्लॉक का काम:

काफी हद तक IE (6/7) में, यदि आप "ज़ूम: 1" के साथ हैलेआउट को ट्रिगर करते हैं और फिर डिस्प्ले को इनलाइन पर सेट करते हैं, तो यह इनलाइन ब्लॉक के रूप में व्यवहार करता है।

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

Answer 4

यह मानते हुए कि आप इसे ब्लॉक एलीमेंट नहीं बनाना चाहते हैं, तो आप कोशिश कर सकते हैं:

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

Answer 5

अवधि { display: table-cell; height: (your-height + px); vertical-align: middle; }

स्पैन के लिए टेबल-सेल (या उस मामले के लिए किसी अन्य तत्व) की तरह काम करने के लिए, ऊंचाई निर्दिष्ट की जानी चाहिए। मैंने एक ऊँचाई फैली है, और वे ठीक काम करते हैं - लेकिन आपको उन्हें वह करने के लिए ऊंचाई मिलानी चाहिए जो आप चाहते हैं।

Answer 6

पाठ्यक्रम का एक और विकल्प जावास्क्रिप्ट का उपयोग करना है (यहां जक्वरी):

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

Answer 7

आपको इस मामले में एक स्पैन की आवश्यकता क्यों है? यदि आप शैली को ऊंचाई देना चाहते हैं तो क्या आप सिर्फ डिव का उपयोग कर सकते हैं? आप के साथ एक तलाक की कोशिश display: inlineकर सकते हैं, हालांकि आप एक ही मुद्दा हो सकता है क्योंकि आप प्रभाव में एक अवधि के रूप में एक ही काम कर रहे हैं।

Comments

या, मेरी रैंबलिंग को पूरी तरह से नजरअंदाज कर दें और मेंहसरफ के जवाब का उपयोग करें :)

— सेठ पेट्री-जॉनसन

डाउन वोटिंग कमेंट्स सिर्फ उन लोगों को हतोत्साहित करते हैं जो वैध रूप से योगदान करना चाहते हैं। इसे रोक! इसके बजाय बस कुछ रचनात्मक प्रतिक्रिया दें, या शायद इस बिंदु पर, मामले पर अपनी राय दें।