Позиционирование элементов в форме с использованием CSS

Question

Я новичок в CSS, и я хочу знать, как лучше позиционировать элементы в форме, используя только CSS.Я просто не могу заставить свои две кнопки выравниваться, вероятно, рядом друг с другом ...

Вот мой HTML-код:

<form action="creat_fam.php" method ="post" >
                <div id="formWrapper">
                    <label for="fam_name">Family Name : </label>
                    <input type="text" placeholder="Family Name" name="fam_name" required>
                    <br/>

                    <label for="people_count">People count : </label>
                    <input type="number" name="people_count" min="1" value="1" required>
                    <br/>

                    <label for="location">Location : </label>
                    <input type="text" name="location" placeholder="location" required>
                    <br/>

                    <input type="reset" value="Reset">
                    <input type="submit" name="submit" value="Done">
                </div>
            </form>

И мой CSS-код:

#formWrapper {
width : 400px;
padding : 15px;
-webkit-box-sizing : border-box;
}

#formWrapper label {
float:left;
margin-bottom : 15px;
line-height: 25px;
}

#formWrapper input[type="text"] ,  #formWrapper input[type="number"] {
float :right;
margin-bottom : 10px;
padding : 2px;
width : 250px;
height: 25px;
border:1px solid gray;
}

#formWrapper input[name="submit"] , #formWrapper input[type="reset"] {
margin : 0;
width : 90px;
height: 40px;
border : none;
border-radius : 4px;
background : -webkit-gradient(linear , 0 0, 0 100% , from(#7f7f7f) ,to(#535353));
color : lightgray;
font-weight: bold;
cursor : pointer;
}

И все, что я получаю, это:

Заранее спасибо.

Answer 1

Хотя inputs являются встроенными элементами, вторая кнопка переходит на следующую строку из-за ввода location. Вход location занимает немного невидимого пространства (margin-bottom) рядом с первой кнопкой, вызывая завертывание второй кнопки.

Answer 2

Добавление float:left; в #formWrapper input[name="submit"] , #formWrapper input[type="reset"] { } позволит выровнять прямоугольники по горизонтали, я бы поместил кнопки в свои собственные div и поиграл с полями, чтобы они совпали вправо.

Answer 3

Я понимаю, что это старый вопрос, но он заметен в результатах поиска, поэтому, надеюсь, это поможет другим.

Используя инструменты разработчика, можно увидеть, что контейнер будет выглядеть намного меньше, чем общая высотаколлективных полей.Чтобы избежать необходимости корректировать поля, чтобы «подогнать его», оберните кнопки в их собственный div (например, #buttonsDiv), как предложено Джеком, но вместо этого примените CSS clear: обоих к div.

Любое форматирование, выполняемое с помощью кнопок, будет применяться независимо от содержимого, указанного выше, что позволяет легко размещать кнопки рядом друг с другом.