Выравнивание кнопки отправки и текстовых полей с помощью css

У меня есть форма, где я дал текстовым полям прокладку, чтобы она была немного больше и приятнее. Под формой у меня есть кнопка отправки. Кнопка и текстовые поля имеют ширину 100%, но проблема в том, что кнопка не полностью на 100% отличается тем, что она не одинаково даже по ширине с текстовыми полями. Что я делаю не так? Не похоже, чтобы "найти" вопросВыравнивание кнопки отправки и текстовых полей с помощью css

Я поставил его здесь http://jsfiddle.net/zrhB6/3/

В Css

input[type=text],input[type=password]{ 
    display: block; 
    height: 3em; 
    width: 100%; 

} 

.btn { 
    background-color:#c1d82f; 
    border:3px solid #97a34b; 
    display:inline-block; 
    color:#26328c; 
    font-family:Verdana; 
    font-size:20px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    cursor: pointer; 
    width: 100%; 
}

HTML

<div class="grid-container">  
    <div class="grid-50 login"> 

     <h3>Login</h3> 
     <form class="grid-100"> 
      <input type="text" name="loginEmail" placeholder="Email"/>    
      <input type="password" name="loginPassword" placeholder="pass"/> 
      <input type="submit" name="loginSubmit" class="btn"/> 
    </div> 



    <div class="grid-50 login"> 
     <h3>Register</h3> 

     <form"> 
      <input type="text" name="registerName" placeholder="Name"/> 
      <input type="text" name="registerEmail" placeholder="Email"/> 
      <input type="password" name="registerPassword" placeholder="pass"/> 
      <input type="submit" name="registerSubmit" class="btn"/>  
    </div> 

</div>

Я использую unSemantic grid, но это не должен Я думаю, что вопрос

источник

2013-07-16 mXX

Похоже, вам нужно будет сбросить стили браузера по умолчанию. Я предполагаю, что это будет либо по умолчанию, как «margin» или «padding». – Xareyo

Я добавил reset.css, но это не исправить проблему – mXX

@mXX проверить демонстрацию. это сработало! http://jsfiddle.net/zrhB6/8/ –

Для обоих селекторов CSS добавьте:

box-sizing:border-box;

Причина заключается в окно по умолчанию загрунтовка не включает отступы и поля в ширину, так что вы получаете 100% + отступы + границу + запас для общей ширины.

источник

2013-07-16 13:56:13 meobyte

Это исправлено! Теперь мне нужно искать то, что точно делает, никогда не слышал об этом на самом деле, но ваше объяснение имеет смысл! – mXX

Выравнивание кнопки отправки и текстовых полей с помощью css

ответ

Смежные вопросы