सीएसएस - फैला के बीच

मैं एचटीएमएलसीएसएस - फैला के बीच

के साथ एक टैब बार अनुकरण करने के लिए मैं प्रत्येक टैब की चौड़ाई पाठ की लंबाई के अनुसार स्थापित किया जाना है (अर्थात चाहते हैं कोशिश कर रहा हूँ, कोई निश्चित चौड़ाई रिक्त स्थान से छुटकारा पाने के) और मामले में शब्द रैप करने के लिए यह स्क्रीन की चौड़ाई से अधिक है

मैं लगभग यह हासिल कर लिया है

<html> 
<head> 

<style type="text/css"> 
    #myTabs .tab { 
    float: left; 
    } 

    #myTabs .tab_middle { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_middle.png'); 
    } 

    #myTabs .tab_left { 
     margin: 0; 
     padding: 0; 
     border: none; 
     background-image:url('images/tabs/tab_left.png'); 
    } 

    #myTabs .tab_right { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_right.png'); 
    } 

</style> 

</head> 

<body> 

<div id="myTabs"> 
    <div class='tab'> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>very very looong</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div class='tab'> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>another loooong tab</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div style='clear:both'></div> 
</div> 

</body> 
</html>

लेकिन, वहाँ उद्घाटन टैब छवि और समापन एक के बीच एक बहुत ही कष्टप्रद अंतरिक्ष है ...

जैसा कि आप देख सकते हैं कि मैंने बिना किसी किस्मत के पैडिंग, स्पेसिंग और सीमा के साथ प्रयास किया है ...

- संपादित करें मैंने स्पैन को एक छोटी तालिका (एक पंक्ति, तीन टीडी) के साथ बदलने की कोशिश की लेकिन यह है एक ही है, केवल बीच की जगह

स्रोत

2010-03-25 opensas

कोशिश करने के लिए इस विचार धन्यवाद समझे: nowrap; – ant

ने इसे आजमाया, यह वही है ... – opensas

फैला के बीच नई-पंक्तियों से छुटकारा छोटा होता है ...। उदाहरण:

<div class='tab'> 
    <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span> 
</div>

न्यूलाइन को HTML में एक स्थान के रूप में गिना जाता है।

स्रोत

2010-03-25 22:38:03 njbair

कठिन छवियों के बिना परीक्षण करने के लिए, लेकिन मैं पृष्ठभूमि रंग और प्रदर्शन कहा: इनलाइन जड़ टैब के लिए। इस प्रयास करें:

<html> 
<head> 

<style type="text/css"> 
    #myTabs .tab { 
     float: left; 
     display:inline; 
    } 

    #myTabs .tab_middle { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_middle.png'); 
    } 

    #myTabs .tab_left { 
     margin: 0; 
     padding: 0; 
     border: none; 
     background-image:url('images/tabs/tab_left.png'); 
    } 

    #myTabs .tab_right { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_right.png'); 
    } 

</style> 

</head> 

<body> 

<div id="myTabs"> 
    <div class='tab' style="background-color:Red;"> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>very very looong</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div class='tab' style="background-color:Green;"> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>another loooong tab</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div style='clear:both'></div> 
</div> 

</body> 
</html>

स्रोत

2010-03-25 22:41:15 Cheddar

अच्छा प्रयास करें, लेकिन अंतरिक्ष अभी भी वहां है, पहले टैब पर लाल और दूसरे पर हरा ... – opensas

टैब बीच, छोड़ दिया और सही भी छोड़ दिया फ्लोट करने के लिए की जरूरत है।

स्रोत

2010-03-25 22:46:54 BigChrisDiD

njbair की प्रतिक्रिया सही है।

एक और विकल्प border-collapse: collapse; संपत्ति के साथ एक तालिका का उपयोग करना था।

एक अन्य गोचा: इंटरनेट एक्सप्लोरर 6.0 में, पहला दृष्टिकोण (स्पैन) अपेक्षित रूप से काम नहीं करता है। खिड़की का आकार बदलते समय, आईई शब्द को लपेटता है, टैब को तोड़ता है, जबकि टेबल दृष्टिकोण के साथ भी आईई पूरे टैब को भेजता है।

स्रोत

2010-03-25 22:56:21 opensas

एक और तरीका है के अलावा njbair के एक माता पिता तत्व को font-size: 0 जोड़ना है। मैं इसे पसंद करता हूं क्योंकि यह टैब डिज़ाइनिंग के लिए सौंदर्यपूर्ण रूप से बेहतर है।

इसके बजाय इस बात का

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span> 
</div>

... हम इस का उपयोग कर सकते हैं:

<div id="tabs" style="font-size: 0;"> 
    <span id="mytab1">Tab 1</span> 
    <span id="mytab2">Tab 2</span> 
    <span id="mytab3">Tab 3</span> 
</div>

... जो बेहतर :)

बेशक

लग रहा है, करने के लिए मत भूलना टैब के लिए अपने असली फ़ॉन्ट आकार को परिभाषित करें।

संपादित:
एक और तरीका रिक्त स्थान से छुटकारा पाने के है: टिप्पणियां जोड़कर।

उदाहरण:

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><!-- 
    --><span id="mytab2">Tab 2</span><!-- 
    --><span id="mytab3">Tab 3</span> 
</div>

स्रोत

2012-07-11 10:31:09

यह स्वीकार्य उत्तर होना चाहिए, क्योंकि यह ओपी है बिनती करना। ओपी चाहता था कि स्पैन के बीच की जगहें न देखी जाए, और स्वीकृत उत्तर सिर्फ इसे HTML से हटा रहा है। –

@ हेक्टरऑर्डोनज़ लोग मेटा से पूछ रहे हैं कि क्या समुदाय को स्वीकार्य उत्तर होना चाहिए, लेकिन इसे अस्वीकार कर दिया गया था, मुख्य रूप से क्योंकि यह उत्तर है कि ओपी का सबसे ज्यादा समुदाय नहीं है, समुदाय का जवाब सबसे ज्यादा उत्साहित है। तो इस बारे में चिंता न करें कि किसके लिए स्वीकार्य उत्तर होना चाहिए;) –

टिप्पणियों पर अच्छी युक्ति। चुनना मुश्किल है जो दो बुराइयों में से कम है: सीएसएस हैक को फ़ॉन्ट आकार की जानकारी या एचटीएमएल हैक की नकल करने की आवश्यकता है जो वांछित शैली को प्राप्त करने के लिए सामग्री को बदलने की तरह लगता है। –

एक अन्य विकल्प nagative letter-spacing:-10px उपयोग करने के लिए है - स्वरूपण पर एक हल्का प्रभाव पड़ता है।

<div id="tabs" style="letter-spacing:-10px;"> 
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span> 
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span> 
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span> 
</div>

this answer सफेद-अंतरिक्ष जोड़ने

स्रोत

2017-09-05 08:23:59 CodeGust

सीएसएस - फैला के बीच

उत्तर

संबंधित मुद्दे