html - 如何仅针对某些行将 html 表单拆分为 2 列

Question

你能帮我把一些行分成两列吗

这是我的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 is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
<li>This is the li....</li>
</ul>
</div>
  </fieldset><br>
  <div class="buttonHolder">
  <div class="buttons">
  <input type="submit" value="Оценить">
  <input type="submit" value="Сбросить">
    </div>
  </div> 
</form>

我知道表单本身真的很远并且远离 desirable look目前，但不胜感激对此的任何建议。

提前致谢

Answer 1

使用 Bootstrap 创建此表单。 Bootstrap 使用将一行分成等长部分的功能。将 div class="row" 用于类似的行集，即。没有 2 列的和有 2 列的。使用 div class="col-sm-6" 将行分成 2 部分，或者适当匹配行的所有内容的总和为 12。