Блог

Всем привет, я новичок в HTML и CSS и в настоящее время работаю над небольшой школьной лабораторией. Я пытаюсь сделать так, чтобы мои две кнопки сброса и отправки были горизонтальными друг с другом, вместо этого они находятся одна над другой. Я не должен изменять какой-либо HTML, просто вносите изменения в код CSS. Кнопки находятся в элементе span внизу. Я добавил свой код формы, чтобы добавить больше контекста

 <form>
    <span class="row">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Jaylen Carroll">
    </span>
    <span class="row">
        <label for="dob">Date of Birth</label>
        <input type="date" id="dob" name="dob">
    </span>
    <span class="row">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="jaylen@gmail.com">
    </span>
    <span class="row">
        <label for="city">City</label>
        <input type="city" id="city" name="city" placeholder="Ottawa">
    </span>
    <span class="row">
        <label for="province">Province</label>
        <select id="province" name="province">
            <option>Please Select..</option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NS">Nova Scotia</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="NT">Northwest Territories</option>
            <option value="NU">Nunavut</option>
            <option value="YT">Yukon</option>
        </select>
    </span>
    <span class="row">
        <input type="reset" id="reset" name="reset">
        <input type="submit" id="submit" name="submit">
    </span>
</form>
  

Когда вы вставляете код в редактор HTML, он выглядит так:

Как мне это нужно:

Мой код Css выглядит следующим образом:

 h1{
text-align:center;
}
label{
margin-top: 16px;
font-weight: bold;
display: block;
text-align: center;
font-size: medium;
}
input{
text-align:center;
display: block;
margin: 15px;
width:150px;
}
form{
margin:0 auto;
width:215px;
}
  

Элементы HTML по умолчанию начинаются с отдельных строк. Одним из решений было бы поместить ваши кнопки в группу с элементом div, а затем использовать свойство float CSS для выравнивания их по горизонтали.

HTML

 <div class="button-group">
  <input type="reset" id="reset" name="reset">
   <input type="submit" id="submit" name="submit">
</div>
  

CSS

 .button-group input {
    float: left;
    }
  

Вы можете обратиться к этой ссылке w3 schools для получения дополнительной информации о группах кнопок:
https://www.w3schools.com/howto/howto_css_button_group.asp

вы можете использовать display flex Это определяет гибкий контейнер; встроенный или блок в зависимости от заданного значения. Это позволяет использовать гибкий контекст для всех его прямых дочерних элементов.

Установите flex:direction в качестве столбца.

Это устанавливает главную ось, тем самым определяя направление, в котором элементы flex помещаются в контейнер flex. Flexbox — это (помимо дополнительной упаковки) концепция компоновки в одном направлении. Представьте, что гибкие элементы в основном располагаются либо горизонтальными рядами, либо вертикальными столбцами.

 .row{
display:flex;
flex-direction:column;
}  

 <form>
    <span class="row">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" placeholder="Jaylen Carroll">
    </span>
    <span class="row">
        <label for="dob">Date of Birth</label>
        <input type="date" id="dob" name="dob">
    </span>
    <span class="row">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="jaylen@gmail.com">
    </span>
    <span class="row">
        <label for="city">City</label>
        <input type="city" id="city" name="city" placeholder="Ottawa">
    </span>
    <span class="row">
        <label for="province">Province</label>
        <select id="province" name="province">
            <option>Please Select..</option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NS">Nova Scotia</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="NT">Northwest Territories</option>
            <option value="NU">Nunavut</option>
            <option value="YT">Yukon</option>
        </select>
    </span>
    <span class="row">
        <input type="reset" id="reset" name="reset">
        <input type="submit" id="submit" name="submit">
    </span>
</form>  

для последней строки класса, которая содержит 2 кнопки, вы можете заменить ее имя класса и применить к нему этот CSS

 .class-name {
  display:"flex",
  // if you want to keep space between the two buttons
  justify-content:"space-between"
  // if not don't put `justify-content` and instead put a margin to one of the buttons to
  // keep a little distance between them
}
  

таким образом, отображение «flex» — ваш друг, когда вы хотите группировать элементы в виде строки