चौड़ाई के साथ सीएसएस इनपुट: 100% माता-पिता की सीमा से बाहर जाता है

Question

मैं एक इनसेट पैडिंग के साथ दो इनपुट फ़ील्ड के लिए एक लॉगिन फ़ॉर्म का गठन करने की कोशिश कर रहा हूं, लेकिन वे दो फ़ील्ड हमेशा अपने माता-पिता की सीमाओं को पार करते हैं; मुद्दा जोड़ा इनसेट पैडिंग से उपजा है । इस मुद्दे को सुधारने के लिए क्या किया जा सकता है?

JSFiddle स्निपेट: http://jsfiddle.net/4x2KP/

NB: कोड अपने सबसे अच्छे पर नहीं हो सकता है। मिसाल के तौर पर, टेक्स्ट इनपुट्स को एनकैप करने वाले स्पैन एलिमेंट की जरूरत नहीं हो सकती है।

    #mainContainer {
    	line-height: 20px;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: rgba(0,50,94,0.2);
    	margin: 20px auto;
    	display: table;
    	-moz-border-radius: 15px;
    	border-style: solid;
    	border-color: rgb(40, 40, 40);
    	border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
    	border-radius: 2px;
    	border-radius: 2px 5px / 5px;
    	box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
    }
    
    .loginForm {
    	width: 320px;
    	height: 250px;
    	padding: 10px 15px 25px 15px;
    	overflow: hidden;
    }
    
    .login-fields > .login-bottom input#login-button_normal {
    	float: right;
    	padding: 2px 25px;
    	cursor: pointer;
    	margin-left: 10px;
    }
    
    .login-fields > .login-bottom input#login-remember {
    	float: left;
    	margin-right: 3px;
    }
    
    .spacer {
    	padding-bottom: 10px;
    }
    
    /* ELEMENT OF INTEREST HERE! */
    input[type=text],
    input[type=password] {
        width: 100%;
    	height: 20px;
    	padding: 5px 10px;
    	background-color: rgb(215, 215, 215);
        line-height: 20px;
        font-size: 12px;
        color: rgb(136, 136, 136);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid rgb(114, 114, 114);
    	box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
    }
    
    input[type=text]:hover,
    input[type=password]:hover,
    label:hover ~ input[type=text],
    label:hover ~ input[type=password] {
     	background:rgb(242, 242, 242) !important;
    }
    
    input[type=submit]:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -10px 10px rgba(255,255,255,0.1);
    }

    <div id="mainContainer">
        <div id="login" class="loginForm">
            <div class="login-top">
            </div>
            <form class="login-fields" onsubmit="alert('test'); return false;">
                <div id="login-email" class="login-field">
                    <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
                    <span><input name="email" id="email" type="text"></input></span>
                </div>
                <div class="spacer"></div>
                <div id="login-password" class="login-field">
                    <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
                    <span><input name="password" id="password" type="password"></input></span>
                </div>
                <div class="login-bottom">
                    <input type="checkbox" name="remember" id="login-remember"></input>
                    <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
                    <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
                </div>
            </form>
        </div>
    </div>

Answer 1

box-sizing:border-boxतत्व की चौड़ाई या ऊंचाई को प्रभावित करने से रोकने के लिए CSS परिभाषा का उपयोग करें । देख लो box-sizing।

बॉर्डर-बॉक्स : चौड़ाई और ऊंचाई के गुणों में पैडिंग और बॉर्डर शामिल हैं, लेकिन मार्जिन नहीं ... ध्यान दें कि पैडिंग और बॉर्डर बॉक्स के अंदर होंगे।

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

कृपया (IE8 +) के ब्राउज़र संगतता परbox-sizing ध्यान दें ।
इस संपादन के समय, कोई उपसर्ग आवश्यक नहीं हैं; seeiprefix.com देखें ।

यहाँ एक प्रदर्शन है:

#mainContainer {
  line-height: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: rgba(0, 50, 94, 0.2);
  margin: 20px auto;
  display: table;
  -moz-border-radius: 15px;
  border-style: solid;
  border-color: rgb(40, 40, 40);
  border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
  border-radius: 2px;
  border-radius: 2px 5px / 5px;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.loginForm {
  width: 320px;
  height: 250px;
  padding: 10px 15px 25px 15px;
  overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
  float: right;
  padding: 2px 25px;
  cursor: pointer;
  margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
  float: left;
  margin-right: 3px;
}
.spacer {
  padding-bottom: 10px;
}
input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
  background: rgb(242, 242, 242);
  !important;
}
input[type=submit]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
.login-top {
  height: auto;/*85px;*/
}
.login-bottom {
  padding: 35px 15px 0 0;
}

<div id="mainContainer">
  <div id="login" class="loginForm">
    <div class="login-top">
    </div>
    <form class="login-fields" onsubmit="alert('test'); return false;">
      <div id="login-email" class="login-field">
        <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
        <span><input name="email" id="email" type="text" /></span>
      </div>
      <div class="spacer"></div>
      <div id="login-password" class="login-field">
        <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
        <span><input name="password" id="password" type="password" /></span>
      </div>
      <div class="login-bottom">
        <input type="checkbox" name="remember" id="login-remember" />
        <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
        <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
      </div>
    </form>
  </div>
</div>

---

वैकल्पिक रूप से, <input>तत्वों को पैडिंग जोड़ने के बजाय , <span>इनपुट को लपेटने वाले तत्वों को स्टाइल करें । इस तरह, <input>तत्वों को width:100%किसी अतिरिक्त पैडिंग से प्रभावित हुए बिना सेट किया जा सकता है । नीचे उदाहरण:

#login-form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: rgba(0, 50, 94, 0.2);
  margin: 20px auto;
  padding: 10px 15px 25px 15px;
  border: 4px solid rgb(40, 40, 40);
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  width: 320px;
}
label span {
  display: block;
  padding: .3em 1em;
  background-color: rgb(215, 215, 215);
  border-radius: .25em;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  margin: 0 0 1em;
}
label span:hover {
  background: rgb(242, 242, 242);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
  background: none;
  border: none;
  width: 100%;
  height: 2em;
  line-height: 2em;
  font-size: 12px;
  color: rgb(136, 136, 136);
  outline: none;
}
.login-bottom {
  margin: 2em 1em 0 0;
}
input#login-button {
  float: right;
  padding: 2px 25px;
}
input#login-remember {
  float: left;
  margin-right: 3px;
}

<form id="login-form">
  <label>E-mail address
    <span><input name="email" type="text" /></span>
  </label>
  <label>Password
    <span><input name="password" type="password" /></span>
  </label>
  <div class="login-bottom">
    <label>
      <input type="checkbox" name="remember" id="login-remember" />Remember my email
    </label>
    <input type="submit" name="login-button" id="login-button" value="Log in" />
  </div>
</form>

Comments

यह काम करने लगता है। बहुत बहुत धन्यवाद, आपने मुझे काफी समय बचाया है।

— छिलका

अपने पहले भाग पर विस्तार करने के लिए:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;

— ब्रैडमैज

आप मेरा दिन दोस्त बनाते हैं ... छोटा सीएसएस लेकिन बहुत महत्वपूर्ण :)

— गौरव मखीजा

Answer 2

यदि उपरोक्त सभी विफल होते हैं, तो अपने इनपुट के लिए निम्न गुणों को सेट करने का प्रयास करें, ताकि यह अधिकतम स्थान ले सके लेकिन अतिप्रवाह नहीं:

input {
    min-width: 100%;
    max-width: 100%;
}

Comments

यह मेरे लिए बहुत ही सरल समाधान के लिए काम किया है धन्यवाद

— एलेक्सा

Answer 3

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

चौड़ाई की गणना करके और पैडिंग को घटाकर (जो क्षेत्र ओवरलैप का कारण बनता है)। 20 पीएक्स 10 पी सी से लेफ्ट पेडिंग के लिए और 10 पी सी राइट राइटिंग के लिए आता है।

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}

Comments

क्या मैं विश्वास नहीं कर सकता कि मैंने पहले कभी नहीं देखा। मेरे उपयोग-केस को पूरी तरह से फिट कर दिया जबकि अन्य उत्तर नहीं दिए। धन्यवाद

— लूट

मेरे लिए काम किया। min/max-width: 100%;नहीं किया, box-sizing: border-box;नहीं किया। मैं कल्पना करता हूं कि मेरी पूरी साइट को एक कंटेनर में डाल दिया जाए और उसे पैडिंग का काम दिया जाए, लेकिन मैं यह नहीं करना चाहता कि बस इस साधारण फिक्स के लिए।

— SUM1

Answer 4

बदलने का प्रयास करें box-sizingकरने के लिए border-box। paddingकरने के लिए जोड़ रहा है widthअपने से inputतत्वों।

यहाँ डेमो देखें

सीएसएस

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+box-sizing

Answer 5

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

Answer 6

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

यह आपको फॉर्म की चौड़ाई निर्धारित करने की भी अनुमति देता है, जैसा कि आप की आवश्यकता होती है और इनपुट आपके किनारों के लिए आवश्यक पैडिंग के भीतर रहते हैं।

इस उदाहरण में मैंने फॉर्म और फ़ील्डसेट पर एक सीमा और किंवदंती और फ़ील्डसेट पर एक अपारदर्शी पृष्ठभूमि रखी है ताकि आप देख सकें कि वे कैसे एक दूसरे के साथ ओवरलैप करते हैं और बैठते हैं।

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>

Answer 7

पैडिंग को अनिवार्य रूप से चौड़ाई में जोड़ा जाता है, इसलिए जब आप कहते हैं width:100%और padding: 5px 10pxआप वास्तव में 100% चौड़ाई में 20px जोड़ रहे हैं।

Comments

और मैं इस समस्या का उपाय कैसे कर सकता हूं? मैं कई चीजों के लिए घंटों से कोशिश कर रहा हूं: /

— छिलका

100% चौड़ाई निकालें, यह आवश्यक नहीं है क्योंकि इनपुट इनलाइन-ब्लॉक तत्व हैं।

— एंडी जी

Answer 8

इस पंक्ति में विस्मयादिबोधक बिंदु के साथ आपके सीएसएस में भी त्रुटि है:

background:rgb(242, 242, 242);!important;

इससे पहले अर्ध-बृहदान्त्र को हटा दें। हालांकि, महत्वपूर्ण का उपयोग शायद ही कभी किया जाना चाहिए और काफी हद तक बचा जा सकता है।

Comments

आह धन्यवाद, मैं इसे याद किया जाना चाहिए, प्लस, महत्वपूर्ण टैग भी आवश्यक नहीं था।

— छिलका

Answer 9

क्या आप चाहते हैं कि इनपुट फ़ील्ड्स केंद्रित हों? तत्वों को केंद्र करने की एक चाल: तत्व की चौड़ाई निर्दिष्ट करें और मार्जिन को ऑटो पर सेट करें, जैसे:

margin : 0px auto;
width:300px

आपके अद्यतन किए गए फ़िडेल का लिंक:

http://jsfiddle.net/4x2KP/5/

Comments

वास्तव में नहीं, मैं उन्हें ".loginForm" की चौड़ाई में ऑटो-आकार में लाने की कोशिश कर रहा हूं। जैसे: jsfiddle.net/4x2KP/7

— छंटनी

आप .loginForm की चौड़ाई बदल सकते हैं और इनपुट केंद्रित रहना चाहिए

— मोनिका

हां यह काम करता है, लेकिन मैंने एक कारण के लिए "इनसेट" पैडिंग को जोड़ा है: मैं नहीं चाहता कि पाठ "शुरुआत से सीधे दूर" शुरू हो। इस तस्वीर को देखें: d.pr/i/xSH1 (पासवर्ड के साथ ईमेल इनपुट की तुलना करें)

— छिलका