我正在尝试制作一个搜索栏,其中绿色 div 将位于灰色的中间(参见 http://codepen.io/anon/pen/LRBEvq?editors=1100 ),以及复选框、选择下拉菜单和输入字段,所有这些都与两个按钮内联 - 所以所有内容都在同一行中。我正在使用 Bootstrap 使其响应,但卡住了,无法弄清楚..感谢您的所有帮助!

这是我的 html:

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                 <label class="checkbox-inline">
                   <input type="checkbox" value="" checked>Lorem
                 </label>
                 <label class="checkbox-inline">
                   <input type="checkbox" value="">Ipsum
                 </label>
               </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

最佳答案

display: inline-block; 用于包装器 div,使其表现得像内联元素,而不会丢失它们的块属性:

.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}

如果您还希望按钮位于同一行,请对整个内容使用 <div class="col-md-12">

要水平居中菜单栏,请使用 margin: 0 auto; ;将其垂直居中,position it,应用 top: 50%;translate 它在负 y 方向(向上)返回其大小的一半:
.formContainer {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

要使输入文本字段与剩余空间一样长,只需将输入的宽度设置为与其包装器 div 相同:
.mainContent .choice-input input {
    width: inherit;
}

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}
.mainContent .choice-input input {
  width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-12">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

关于html - 使复选框,选择和输入字段内联,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40038296/

10-16 23:24
查看更多