Создание форм с двойными столбцами

Итак, у меня есть эта форма, которую я быстро сделал, и я получил ее, чтобы теперь можно было делать двойные столбцы.Создание форм с двойными столбцами

ссылка: http://codepen.io/zomdar/pen/WbXBaq

<head> 
    </head> 
    <body> 
     <fieldset> 

      <form> 
       <div class="half"> 
        <label for="name">Name</label> 
        <input type="text" id="name" name="name"> 
       </div> 
       <div class="half"> 
        <label for="email">Email</label> 
        <input type="text" id="email" name="email"> 
       </div> 
       <div class="half"> 
        <label for="zip">Zip/Postal code</label> 
        <input type="text" id="zip" name="zip"> 
       </div> 
       <div class="half"> 
        <label for="country">Country</label> 
        <select id="country" name="country"><option></option></select> 
       </div> 
       <div class="full"> 
        <label for="message">Message</label> 
        <textarea id="message" name="message"></textarea> 
       </div> 
       <div class="half"> 
        <input type="checkbox" id="copy" name="copy"> 
        <label for="copy">Send me a copy</label> 
       </div> 
       <div class="half right"> 
        <input type="submit" value="send"> 
       </div> 
      </form> 
     </fieldset> 
    </body> 
</html>

CSS:

fieldset { width: 900px; } 
input[type=text], select, textarea { width: 98%; } 
.half { float: left; width: 48%; padding: 1%; } 
.full { clear: both; width: 98%; padding: 1%; } 
.right { text-align: right; }

, но проблема в том, что, когда я поставил DIV тег половину и поместить его в HTML .... я должен положить 2 «половина» полей для перехода на следующую строку. Я не могу просто поставить 1 половину класса и еще одну половину класса ниже половины класса. Любые идеи о том, как я могу это сделать? добавить еще один класс?

источник

2015-02-10 zomdar

добавить класс .clear { clear: both; } так:

fieldset { width: 500px; padding: 1%; } 
 
input[type=text], select, textarea { width: 98%; } 
 
.half { float: left; width: 48%; padding: 1%; } 
 
.clear { clear: both; } 
 
.full { clear: both; width: 98%; padding: 1%; } 
 
.right { text-align: right; }

<head> 
 
    </head> 
 
    <body> 
 
     <fieldset> 
 
      <legend>Contact form</legend> 
 
      <form> 
 
       <div class="half"> 
 
        <label for="name">Name</label> 
 
        <input type="text" id="name" name="name"> 
 
       </div> 
 
       <div class="clear"></div><!-- added div class clear --> 
 
       <div class="half"> 
 
        <label for="email">Email</label> 
 
        <input type="text" id="email" name="email"> 
 
       </div> 
 
       <div class="half"> 
 
        <label for="zip">Zip/Postal code</label> 
 
        <input type="text" id="zip" name="zip"> 
 
       </div> 
 
       <div class="half"> 
 
        <label for="country">Country</label> 
 
        <select id="country" name="country"><option></option></select> 
 
       </div> 
 
       <div class="full"> 
 
        <label for="message">Message</label> 
 
        <textarea id="message" name="message"></textarea> 
 
       </div> 
 
       <div class="half"> 
 
        <input type="checkbox" id="copy" name="copy"> 
 
        <label for="copy">Send me a copy</label> 
 
       </div> 
 
       <div class="half right"> 
 
        <input type="submit" value="send"> 
 
       </div> 
 
      </form> 
 
     </fieldset> 
 
    </body> 
 
</html>

источник

2015-02-10 19:02:26 indubitablee

ооо спасибо за быстрый ответ .... только что спас меня, как 2 часа: D – zomdar

Создание форм с двойными столбцами

ответ

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