css - How to split html form in 2 columns only for some rows -
could me please splitting rows in 2 columns
here html
body { font-family: 'arial', serif; max-width: 100%; padding: 0px 30px; } h1 { margin-bottom: 0px; } p { text-align: center; margin-top: 0px; } fieldset { margin-bottom: 15px; padding: 10px; border-radius: 5px; border-width: 1px; } legend { padding: 0px 3px; font-weight: bold; font-variant: small-caps; } label { width: 110px; display: inline-block; vertical-align: top; margin: 6px; } textarea { width: 100%; } input:focus { background: #ebebe3; } textarea { height: auto; weidth: 100%; } select { width: 254px; } .buttonholder{ text-align: center; } input[type=text] { border-radius: 3px; } input[type=choice] { border-radius: 3px; } input[type=submit] { padding: 9px; width: 80px; background-color:#2c3e50; color:#fff; position:relative; } .list { width:100%; height:100px; overflow-y: scroll; border:0.1px solid; } .content { width:620px; float:left; } .sidebar { float:left; width:340px; }
<form action="#" > <p>Форма отзыва</p> <fieldset> <legend>Личные данные</legend> <div class="content"> <label for="id">id отзыва</label> <input type="text" id="id" placeholder="12345" autofocus> </div> <div class="sidebar"> <label for="name">Имя путешественника</label> <input type="text" id="name" value="Кекс"> </div> </fieldset> <fieldset> <legend>Отзыв о поездке</legend> <label for="country">Страна визита</label><br> <input type="text" id="country"> <label for="city">Город</label><br> <select type="choice"> <option value="oslo">Осло</option> <option value="bergen">Берген</option> <option value="tromse">Тромсе</option> <option value="tronheim">Тронхейм</option> </select> <label for="gender">Оценка поездки</label><br> 0 <input type="range" name="a" value="98"> 10 <input type="number" name="b" value="10"> <br><br> <label for="comments">Текст отзыва</label><br> <textarea id="comments" value="Это было просто мяу!"></textarea> </fieldset> <fieldset> <legend>Оценка отеля</legend> <label for="hotelname">Название отеля</label><br> <input type="text" id="hotelname" placeholder="Название по-английски"><br> <label for="date">Дата въезда</label><br> <input id="date" type="date" placeholder="В формате дд-мм-гггг"><br> <label for="color">Цвет кроватки</label><br> <input id="color" type="color" value="#ff0000"><br> <label for="lunches">Оценка обедов</label><br> <select> <option value="good">Подушечки оближешь</option> <option value="disgusting">Отвратительно</option> <option value="very poor">Очень плохо</option> </select><br> <label for="fish">Самая вкусная рыба</label><br> <div class="list"> <ul> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> <li>this li....</li> </ul> </div> </fieldset><br> <div class="buttonholder"> <div class="buttons"> <input type="submit" value="Оценить"> <input type="submit" value="Сбросить"> </div> </div> </form>
i know form row , far away desirable look @ moment appreciate advices on this.
thanks in advance
use bootstrap create form. bootstrap uses functionality of dividing row parts of equal lengths. use div class="row"
similar set of rows, ie. ones without 2 colums , ones 2 columns. divide row 2 parts using div class="col-sm-6"
or appropriate match sum of 12 contents of row.
Comments
Post a Comment