क्या किसी क्षेत्र की चौड़ाई होने का कोई तरीका है, केवल उन पर नियंत्रण जितना विस्तृत हो सकता है?

Question

ऐसा लगता है कि फ़ील्डसेट अपने कंटेनर की 100% चौड़ाई तक डिफॉल्ट करता है। क्या कोई ऐसा तरीका है जिससे आप फील्ड सेट कर सकते हैं जैसे कि फ़ील्डसेट के अंदर व्यापक नियंत्रण उतना ही बड़ा हो?

Answer 1

उपयोग करें display: inline-block, हालांकि आपको वास्तव में इनलाइन प्रदर्शित करने से रखने के लिए इसे DIV के अंदर लपेटने की आवश्यकता है। सफारी में परीक्षण किया गया।

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>

Comments

यह एक रिश्तेदार n00b के लिए सबसे स्पष्ट जवाब था और इसने मेरी समान समस्या को हल किया। धन्यवाद।

— मावग का कहना है कि मोनिका

हाँ, यह मेरे उत्तर की तुलना में एक बेहतर / सरल विचार है यदि यह उन सभी ब्राउज़रों पर काम करता है जिनकी आपको परवाह है।

— टॉम

FYI करें: display: inline-block;IE6 और IE7 में काम नहीं करता है। अगर आपको उनकी परवाह नहीं है तो आपको खुशी होगी। :)

— डायमो जूल

IE8 और फ़ायरफ़ॉक्स 10 में बढ़िया काम करता है!

— एड बेयेट्स

विभा के साथ वूडू क्या है। यह आवश्यक प्रतीत होता है, लेकिन क्यों?

— Superluminary

Answer 2

fieldset {display:inline} या fieldset {display:inline-block}

यदि आप दो फ़ील्ड को लंबवत रूप से अलग करना चाहते हैं, तो <br/>उनके बीच एकल का उपयोग करें। यह शब्दार्थ रूप से सही है और इससे अधिक कठिन नहीं है।

Comments

IE 11 के लिए, प्रदर्शन: इनलाइन ने काम किया, लेकिन प्रदर्शित नहीं किया गया: इनलाइन-ब्लॉक

— गैब हैल्सर

Answer 3

आप इसे फ्लोट कर सकते हैं, तो यह केवल इसकी सामग्री के समान विस्तृत होगा, लेकिन आपको यह सुनिश्चित करना होगा कि आप उन फ़्लोट्स को साफ़ कर दें।

Answer 4

यह भी काम करता है। 

fieldset {
  width:0px;
}

Comments

यदि आपके पास एक ही पंक्ति में प्रकट होने वाले फ़ील्ड के भीतर कई तत्व हैं तो यह काम नहीं करता है।

— मैथ्यू Schinckel

यकीन है कि यह करता है, यदि आप उन्हें लपेटने के लिए एक ब्लॉक तत्व का उपयोग करते हैं या नॉरैप और स्पष्ट ब्रेक का संयोजन करते हैं।

— dan.s.ward

Answer 5

दुर्भाग्य से और न display:inline-blockही width:0pxInternet Explorer में संस्करण 8 तक काम करता है। मैंने Internet Explorer 9 की कोशिश नहीं की है। मैं इंटरनेट एक्सप्लोरर को अनदेखा करना चाहूंगा, लेकिन मैं ऐसा नहीं कर सकता।

एकमात्र विकल्प जो फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर 8 पर काम करता है float:left। एकमात्र मामूली दोष यह है कि आपको clear:bothउस तत्व का उपयोग करना याद रखना होगा जो फॉर्म का अनुसरण करता है। यदि आप भूल जाते हैं तो निश्चित रूप से, यह बहुत स्पष्ट होगा ;-)

Answer 6

आप हमेशा फ़ील्ड की चौड़ाई को बाधित करने के लिए CSS का उपयोग कर सकते हैं, जो अंदर के नियंत्रण को भी बाधित करेगा।

मुझे लगता है कि मुझे अक्सर selectनियंत्रणों की चौड़ाई में बाधा डालनी होगी, अन्यथा वास्तव में लंबे विकल्प पाठ इसे पूरी तरह से असहनीय बना देगा।

Comments

लेकिन मैं इसे गतिशील बनाना चाहता हूं, इसलिए यह क्षेत्र "स्वतः उत्पन्न" होगा और पूर्वनिर्धारित चौड़ाई नहीं होगी

— leora

Answer 7

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

Comments

कृपया कुछ

— स्पष्टीकरण

टिम बर्नर्स-ली आपको यह भी नहीं बता सके कि यह काम क्यों होता है, लेकिन यह काम सिर्फ धन्यवाद देता है!

— lucasjohnson

Answer 8

इसे इस्तेमाल करे

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>

Answer 9

मैं नीचे के रूप में किंवदंती शैली को ओवरराइड करके अपना मुद्दा तय किया

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}

Answer 10

Mihai समाधान के आगे बढ़ते हुए, क्रॉस-ब्राउज़र को संरेखित किया गया:

<TABLE>
  <TR>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

क्रॉस-ब्राउज़र सही संरेखित करें:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

Comments

हालांकि यह काम कर सकता है, टेबल को आमतौर पर लेआउट के लिए अच्छा अभ्यास नहीं माना जाता है ... stackoverflow.com/questions/83073/…

— StackExchange Heck

5 फ़ील्ड्स के लिए ऐसा करने की कल्पना करें? 10? 15 ?? यह मत करो!

— टेलर ब्राउन

यहां आने वाले किसी भी नए देव के लिए। यह मत करो। आप अपनी आवश्यकता से 10 गुना अधिक कोड का उपयोग करेंगे।

— १४:०४

Answer 11

            <table style="position: relative; top: -0px; left: 0px;">
                <tr>
                    <td>
                        <div>   
                            <fieldset style="width:0px">
                                <legend>A legend</legend>
                                <br/>
                                <table cellspacing="0" align="left">
                                    <tbody>
                                        <tr>
                                            <td align='left' style="white-space: nowrap;">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </fieldset>
                        </div>
                    </td>
                </tr>
            </table>

Answer 12

आप फ़ील्ड को तालिका के अंदर भी रख सकते हैं, जैसे:

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>