Genişlikli CSS Girişi:% 100 ebeveynin sınırının dışına çıkar

172

Bir iç metin dolgu ile iki giriş alanlarından oluşan bir giriş formu yapmaya çalışıyorum, ancak bu iki alan her zaman üst sınırlarını aşan; sorun eklenen ek dolgudan kaynaklanıyor . Bu sorunu gidermek için ne yapılabilir?

JSFiddle snippet'i: http://jsfiddle.net/4x2KP/

Not: Kod en temizde olmayabilir. Örneğin, metin girişlerini kapsayan span öğesine hiç gerek duyulmayabilir.

    #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>
Snippet'i genişlet

css  forms  input  width 
— peelz
kaynak

Yanıtlar:

311

box-sizing:border-boxDolgunun bir öğenin genişliğini veya yüksekliğini etkilemesini önlemek için CSS tanımını kullanın . Bkz box-sizing.

border-box : width ve height özellikleri dolgu ve kenarlığı içerir, ancak kenar boşluğunu içermez ... Dolgu ve kenarlığın kutunun içinde olacağını unutmayın.

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

Lütfen (IE8 +) tarayıcı uyumluluğunabox-sizing dikkat edin .
Bu düzenleme sırasında önek gerekmez; bkz. shouldiprefix.com .

İşte bir gösteri:

#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>
Snippet'i genişlet

Alternatif olarak, <input>öğelerin kendilerine dolgu eklemek yerine <span>, girişleri saran öğelere stil verin . Bu şekilde, <input>elemanlar width:100%herhangi bir ek dolgudan etkilenmeden ayarlanabilir . Aşağıdaki örnek:

Kod snippet'ini göster

— showdev
kaynak
1
Bu işi yapıyor gibi görünüyor. Çok teşekkürler, beni çok zaman kazandın.
— peelz
2
İlk bölümünüzü genişletmek için:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
— Bradmage
benim gün yapmak dostum ... küçük css ama çok önemli :)
— Gourav Makhija
18

Yukarıdakilerin tümü başarısız olursa, maksimum yer kaplaması ancak taşmaması için girişiniz için aşağıdaki özellikleri ayarlamayı deneyin:

input {
    min-width: 100%;
    max-width: 100%;
}
— Deiu
kaynak
1
benim için işe
— yarayan
13

Diğer yanıtlar size genişliği sabit kodlamanızı veya tarayıcıya özgü bir kesmek kullanmayı söylüyor. Bence daha basit bir yol var.

Genişliği hesaplayarak ve dolguyu çıkararak (alanın çakışmasına neden olur). 20 piksel sol dolgu için 10 piksel ve sağ dolgu için 10 pikseldir.

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}
— Al Zziwa
kaynak
3
daha önce hiç görmediğime inanamıyorum. Diğer cevaplar vermediğimde, kullanım durumumu mükemmel bir şekilde uydurdu. teşekkürler
— rob
Benim için çalıştı. min/max-width: 100%;yapmadı, box-sizing: border-box;yapmadı. Tüm sitemi bir konteynere koymayı ve doldurmayı işe yarayacağını hayal ediyorum, ancak bunu sadece bu basit düzeltme için yapmak istemiyorum.
— TOPLA
4

Değiştirmeyi deneyin box-sizingTo border-box. paddingEkliyor widthsenin ait inputunsurları.

Demoyu burada görebilirsiniz

CSS

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

input {
    box-sizing: border-box;
}

+box-sizing

— Sourabh
kaynak
2

Dolgu toplam genişliğe eklenir. Konteynerinizin piksel genişliği olduğundan, girişlere de bir piksel genişliği vermek daha iyidir, ancak aynı sorunu önlemek için dolgu ve kenarlığı ayarladığınız genişlikten kaldırmayı unutmayın.

— ralph.m
kaynak
1

Bu çözümleri denedim ama kesin bir sonuç alamadım. Sonunda bir alan kümesi ile uygun anlamsal işaretleme kullandım. Herhangi bir genişlik hesaplaması ve herhangi bir kutu boyutlandırma eklemek zorunda kaldı.

Ayrıca form genişliğini istediğiniz gibi ayarlamanıza olanak tanır ve girişler kenarlarınız için ihtiyacınız olan dolgu içinde kalır.

Bu örnekte, forma ve fieldset'e bir kenarlık ve efsane ve fieldset'e opak bir arka plan koydum, böylece üst üste binip birbirleriyle nasıl oturduklarını görebilirsiniz.

<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>
— Jason Merry
kaynak
0

Dolgu temel olarak genişliğe eklenir, bu nedenle söylediğinizde width:100%ve padding: 5px 10pxaslında% 100 genişliğe 20 piksel eklersiniz.

— n00dle
kaynak
1
Ve bu sorunu nasıl çözebilirim? Saatlerdir birçok şey deniyorum: /
— peelz
% 100 genişliği kaldırın, girişler satır içi blok öğeleri olduğundan gerekli değildir.
— Andy G
0

Ayrıca css'inizde bu satırdaki ünlem işaretiyle ilgili bir hata var:

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

önünden noktalı virgül çıkarın. Ancak,! Önemli nadiren kullanılmalıdır ve büyük ölçüde önlenebilir.

— Andy G
kaynak
Ah teşekkürler, kaçırmış olmalıydım, artı! Önemli etiketi bile gerekli değildi.
— peelz
-1

Giriş alanlarının ortalanmasını istiyor musunuz? Öğeleri ortalamak için hile: öğenin genişliğini belirtin ve kenar boşluğunu otomatik olarak ayarlayın, örneğin:

margin : 0px auto;
width:300px

Güncellenmiş kemanınıza bir bağlantı:

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

— monika
kaynak
Gerçekten değil, onları ".loginForm" genişliğine otomatik boyut almak için çalışıyorum. Örn: jsfiddle.net/4x2KP/7
— peelz
.LoginForm'un genişliğini değiştirebilirsiniz ve girişler ortalanmış olarak kalmalıdır
— monika
Evet, bu işe yarıyor, ama bir nedenle "iç metin" dolgu ekledim: Metnin "en başından" başlamasını istemiyorum. Bu resme bakın: d.pr/i/xSH1 (E-posta girişini bir şifreyle karşılaştırın)
— peelz
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.