如何仅对某些行

时间：2016-07-15 22:27:33

标签： html css

你可以帮我解决一下在2列中划分一些行

这是我的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目前相距甚远，但我会对此提出任何建议。

提前致谢

2 个答案:

答案 0 :(得分：0)

使用Bootstrap创建此表单。 Bootstrap使用将行划分为相等长度的部分的功能。 将sqlContext.sql("select distinct device from TestTable1 where id = 23233").show() %sql select distinct device from TestTable1 where id = 23233 +-----------+ |device | +-----------+ | | | | |ion| | | | | | | +-----------+ 用于类似的行集，即。没有2列和2列的。 使用div class="row"将行划分为2个部分或适当地将行的所有内容与12的总和相匹配。

答案 1 :(得分：0)

要达到预期效果，请使用以下选项 1.内部包裹部分应按行显示。 2.删除br标签，因为它会强制内联显示在新行中 3.在CSS下方添加，以显示跨越字段集宽度的内嵌占用45％宽度的div，垂直对齐输入字段和填充以避免在一个部分紧密缩放字段

fieldset div {
  display: inline-block;
  width: 45%;
  padding: 10px;
  vertical-align: top;
}

Codepen- http://codepen.io/nagasai/pen/ZOvrqo

HTML：

<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>
    <div>
      <label for="country">Страна визита</label><br>
      <input type="text" id="country">
    </div>
    <div>
      <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>
    </div>
    <div>
      <label for="gender">Оценка поездки</label><br> 0
      <input type="range" name="a" value="98"> 10
    </div>
    <div>
      <input type="number" name="b" value="10">
    </div>
    <label for="comments">Текст отзыва</label><br>
    <textarea id="comments" value="Это было просто мяу!"></textarea>
  </fieldset>

  <fieldset>
    <legend>Оценка отеля</legend>
    <div>
      <label for="hotelname">Название отеля</label><br>
      <input type="text" id="hotelname" placeholder="Название по-английски">
    </div>
    <div>
      <label for="date">Дата въезда</label><br>
      <input id="date" type="date" placeholder="В формате дд-мм-гггг"></div>
    <div>
      <label for="color">Цвет кроватки</label><br>
      <input id="color" type="color" value="#ff0000">
          </div>
    <div>
      <label for="lunches">Оценка обедов</label>

      <select>
      <option value="good">Подушечки оближешь</option>
      <option value="disgusting">Отвратительно</option>
      <option value="very poor">Очень плохо</option>
</select>
    </div>

    <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>

CSS：

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: 170px;
  display: 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: 95%;
  height: 100px;
  overflow-y: scroll;
  border: 0.1px solid;
}

.content {
  width: 620px;
  float: left;
}

.sidebar {
  float: left;
  width: 340px;
}

fieldset div {
  display: inline-block;
  width: 45%;
  padding: 10px;
  vertical-align: top;
}
相关问题
最新问题