उपलब्ध स्थान को कवर करने के लिए क्षैतिज तत्वों का विस्तार कैसे करें?

Question

मैं एक CSS fluid tab menu बनाने की कोशिश कर रहा हूं, टैब की एक चर संख्या के साथ (विंडोज़ में क्या देखा जा सकता है, जहां टैब्स निहित हेडर की लंबाई के आधार पर विस्तारित है, नीचे देखें)।

यहाँ एक उदाहरण है, मैं सेटअप (मैं तत्व संरचना रखने की जरूरत है):

<div class="test"> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">very long text is this</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Two</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Three</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Four</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Five</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
</div> 

और सीएसएस:

.test { width: 100%; display: table; } 
.test .element { border: 1px solid red; float: left; min-width: 19%; } 
.test .element.prelast { border: 1px solid green; } 
.test .element.last { float: none !important; overflow: hidden; } 
.test .element h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

यह निम्न पैदा करेगा:

जब मैं स्क्रीन, शेष चौड़ाई भरने पिछले तत्व के साथ कई लाइनों के लिए मेनू टूटता हटना:

मेरे समस्या "पहली पंक्ति" में तत्वों विस्तार हो रहा है उपलब्ध स्थान एक बार कवर करने के लिए मेनू टूटता है। बस min-width: 19% सेटिंग समस्या है, लेकिन मुझे काम करने के लिए कुछ भी नहीं मिल सकता है।

प्रश्न:
कैसे मैं एक "पंक्ति" में तत्वों होगा (यह एक पंक्ति वास्तव में नहीं है अगर यह कई पंक्तियों में टूट जाता है) केवल सीएसएस का उपयोग करके सभी उपलब्ध स्थान ले?

संपादित:
Here दिखा कि मैं क्या मतलब है एक नमूना पृष्ठ है। ब्राउज़र विंडो को हटाना और देखें कि तत्व कैसे व्यवहार करते हैं। मैं कई पंक्तियों में तोड़ने के बाद पहली पंक्ति को पूर्ण चौड़ाई का विस्तार करने का एक तरीका ढूंढ रहा हूं।

अद्यतन:
मैंने नमूना पृष्ठ अपडेट किया है। here देखें। मुझे तत्वों का विस्तार करने में कोई समस्या नहीं है, जबकि वे सभी "एक पंक्ति में" हैं। समस्या तब शुरू होती है जब पंक्ति कई पंक्तियों में "टूट जाती है"। मैं जानना चाहता हूं कि स्क्रीन पर सभी तत्वों का विस्तार करके शीर्ष दाएं अंतर को भरना संभव है या नहीं।

यहां दो अतिरिक्त स्क्रीनशॉट हैं।

तो तत्व के बगल में अंतर "चार" तत्व के बगल में अब

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

इसके अलावा, यदि यह आसानी से जावास्क्रिप्ट/Jquery का उपयोग करके किया जा सकता है, तो मैं विचारों को भी सुनूंगा?

मदद करने के लिए धन्यवाद!

Answer 1

पहली बात मैं के बारे में सोच सकते हैं कि जब आप पहले से ही display: table करने के लिए अपने .test div स्थापित कर रहे हैं, हो सकता है आपके .test .elementdisplay: table-cell करने के लिए सेट है। यह उन्हें एक ही पंक्ति में रखेगा और केवल 100% तक विस्तारित होगा। केवल एक चीज यह है कि < आईई 8 display: table-cell संभाल नहीं करता है, लेकिन इसके आसपास समाधान हैं। एक here है। मुझे यकीन नहीं है कि यह वास्तव में वही हासिल करता है जो आप चाहते हैं, लेकिन यह एक संभावना है। हालांकि मैं इसके बारे में अपनी अवचेतन सोच रखूंगा। अच्छा प्रश्न!

fiddle

Answer 2

आप 100% की तरह का सिर्फ <table> एक होने चौड़ाई के साथ ऐसा कर सकते हैं;

<table class="menu" cellpadding="0" cellspacing="0"> 
<tr> 
<td>menu1</td> 
<td>menu2</td> 
<td>menu3</td> 
<td>menu4</td> 
<td>menu5</td> 
</tr> 
</table> 

और सीएसएस में;

.menu{ 
    width: 100%; 
} 
.menu tr td{ 
    height: 20px; 
    background: gray; 
    cursor: pointer; 
    text-align: center; 
} 
.menu tr td:hover{ 
    background: white; 
} 

Here लाइव डेमो है।

Answer 3

यदि आप जावास्क्रिप्ट और jQuery का उपयोग कर सकते हैं तो कोई समाधान है।

check this Demo

निजी तौर पर मुझे नहीं लगता कि यह सबसे अच्छा समाधान है, लेकिन यह आप मदद कर सकते हैं हो सकता है भी इस डेमो केवल 2 पंक्तियाँ

Answer 4

आप रखना चाहते हैं के लिए काम करने के लिए तैयार है उन्हें एक पंक्ति में और उनके पास मौजूद सभी जगहों का उपयोग करके, कोई फर्क नहीं पड़ता कि आपके पास कितनी वस्तुएं हैं, डिस्प्ले का उपयोग करके: टेबल, टेबल-पंक्ति और टेबल-सेल वास्तविक समाधान है। लेकिन आपको इसे काम करने के लिए उनमें से सभी 3 का उपयोग करना होगा। तो आप क्या जरूरत है

<div class="menu"> 
    <ul> <!-- Menus should usually be Lists if it's your choice --> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
</div> 

है और फिर सीएसएस

.menu { display: table; width: 100%; } 
.menu ul { display: table-row; width: 100%; } 
.menu ul li { display: table-cell; } 

सब जादू है कि में। तो आपकी कोशिकाएं हमेशा पूर्ण स्थान का उपयोग करती हैं।

आप कई पंक्तियों की कार्यक्षमता चाहते हैं, आप के साथ अपने खिड़की के लिए जाँच करने के लिए कुछ जावास्क्रिप्ट का उपयोग करें और फिर उन्हें दो सूचियाँ में sperate यह

<div class="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
    <ul> 
     <li>Five</li> 
    </ul> 
</div>