क्या ऊंचाई और चौड़ाई स्पान पर लागू नहीं होती है?

254

कुल नॉब प्रश्न, लेकिन यहां।

सीएसएस

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

एचटीएमएल

<span class="product__specfield_8_arrow">&nbsp;</span>

बेला

मूल रूप से मैं एक बटन का अनुकरण करने की कोशिश कर रहा हूं, एक इनपुट फ़ील्ड के बगल में एक स्पैन (या कुछ) बटन की तरह दिखता हूं जो वास्तव में एक ऑटो फिल जनरेटर के कारण एक होने की आवश्यकता नहीं है जो त्रुटियों को उत्पन्न करता है। सोचा कि यह अभी के लिए एक त्वरित सुधार होगा, लेकिन स्पष्ट रूप से नहीं।

धन्यवाद।

css html width

— केली
स्रोत

2

तुम भी बाहर stackoverflow.com/questions/2343989/…

— Edan Maor

2

मानक की भी जांच करें, विशेष रूप से w3.org/TR/CSS2/visudet.html#the-width-property और w3.org/TR/CSS2/visudet.html#the-height-property , जो गुणों को बताती हैं : सभी तत्व लेकिन गैर-प्रतिस्थापित इनलाइन तत्व, तालिका पंक्तियाँ, और पंक्ति समूह "

— 9

426

स्पान एक इनलाइन तत्व है। इसकी कोई चौड़ाई या ऊँचाई नहीं है।

आप इसे एक ब्लॉक-स्तरीय तत्व में बदल सकते हैं, फिर यह आपके आयाम निर्देशों को स्वीकार करेगा।

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

— बशीर अल-मोमानी
स्रोत

9

धन्यवाद, इसे ठीक किया। मैंने प्रदर्शन की कोशिश की: पहले ब्लॉक करें लेकिन इनलाइन ब्लॉक ने इसे ठीक कर दिया।

— काइल

21

यही समस्या है। यदि display: blockनिर्दिष्ट किया जाता है, तो स्पैन एक इनलाइन तत्व होने के लिए बंद हो जाता है और एक तत्व अगली पंक्ति में प्रकट होने के बाद। मुझे एक तत्व की आवश्यकता है जो इनलाइन है, लेकिन वांछित चौड़ाई का हो सकता है।

— पॉल

6

एक बेहतर समाधान उपयोगकर्ता प्रदर्शन के लिए है: इनलाइन-ब्लॉक

— अनंत

37

सीएसएस का उपयोग divकरने के बजाय spanया सीएसएस का उपयोग करने का प्रयास करें - display: block;या डिफ़ॉल्ट रूप से एक इनलाइन तत्व है जो नहीं ले सकता है और गुण नहीं कर सकता है ।display: inline-block;spanwidthheight

— इसहाक
स्रोत

9

डिव किसी स्पैन के लिए सिमेंटिक रिप्लेसमेंट नहीं है। स्पैन एक टेक्स्ट कंटेनर है जबकि डिव एक लेआउट कंटेनर है। डेवलपर आर्ट ने इनलाइन-ब्लॉक शैली को लागू करने का सुझाव दिया है जो सही उत्तर है।

— ब्रायन स्कॉट

3

यह प्रश्न इंगित करने के लिए कोई संदर्भ प्रदान नहीं करता है कि div स्वाभाविक रूप से अनुचित रूप से अनुपयुक्त है।

— इसहाक

1

वास्तव में, ऑप के मार्कअप को पढ़ने से यह वास्तव में ऐसा लगता है जैसे प्रश्न में तत्व का उपयोग केवल पृष्ठभूमि छवि प्रदर्शित करने के लिए किया जा रहा है। इस मामले में एक div वास्तव में अधिक उपयुक्त होगा। -1 इसहाक की मूल टिप्पणी से हटा दिया गया।

— ब्रायन स्कॉट

इसके अलावा, मैंने स्पैन पर जाने से पहले एक डिव का उपयोग करने की कोशिश की, यह हमेशा पिछले डिव के नीचे प्रदर्शित होता है .. इसलिए स्पैन के साथ चला गया :)

— काइल

22

@ नाम से प्रेरित, मैंने निम्नलिखित जोड़ा और यह मेरे लिए काम किया:

display: inline-block; overflow: hidden;

— olleh
स्रोत

11

स्पैन चौड़ाई और ऊंचाई तब लेता है जब हम इसे ब्लॉक एलिमेंट बनाते हैं।

span {display:block;}

— तौहीद रहमान
स्रोत

14

मुझे लगता display: inline-block;है कि बेहतर है

— 151291

इस तरह से आप सभी स्पैन के लिए बदल देंगे, मैं एक वर्ग का उपयोग करने की सलाह दूंगा।

— होला सोय एडु

9

@Paul की टिप्पणी के अनुसार, यदि डिस्प्ले: ब्लॉक निर्दिष्ट है, तो इनलाइन तत्व होने के लिए स्पान रुकता है और एक तत्व अगली पंक्ति में दिखाई देता है।

मैं यहां अपने स्पैन हाइट प्रॉब्लम का हल ढूंढने आया था और मुझे खुद का एक सॉल्यूशन मिला

overflow:hidden;इसे जोड़ने और इसे इनलाइन करने से इस समस्या का हल सिर्फ IE8 Quirks मोड में होगा

— अली खान का नाम लिया
स्रोत

मैं overflow:hidden;इस संदर्भ में देखता रहता हूं । एमडीएन का कहना है , "कंटेंट को क्लिप किया गया है, जिसमें कोई स्क्रॉलबर्स नहीं है" । प्रतिरूप लगता है। यहाँ क्या करता है?

— बॉब स्टीन

8

spans डिफ़ॉल्ट रूप से इनलाइन प्रदर्शित होते हैं, जिसका अर्थ है कि उनकी ऊंचाई और चौड़ाई नहीं है।

display: blockअपने स्पैन में एक जोड़ने का प्रयास करें ।

— एडन मॉर
स्रोत

6

इनलाइन तत्व के रूप में स्पैन शुरू होता है। उदाहरण के लिए, आप इसकी प्रदर्शन विशेषता को ब्लॉक कर सकते हैं, और इसकी ऊँचाई / चौड़ाई विशेषताएँ प्रभावी होने लगेंगी।

2

span {display:block;} एक लाइन-ब्रेक भी जोड़ता है।

उस से बचने के लिए, उपयोग करें span {display:inline-block;}और फिर आप इनलाइन तत्व में चौड़ाई और ऊंचाई जोड़ सकते हैं, और आप इसे ब्लॉक के भीतर भी संरेखित कर सकते हैं:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

यहां अधिक

— markling
स्रोत