html - CSS 如何居中输入

Question

我有这样的东西Codepen

如何使输入始终位于 div .cont 的中心并使标签位于左侧和右侧。不管标签有多长。不知道label要多长，set是多少。 (一组我的意思是标签，输入，输入和标签)

代码:

.site {
  border: 1px solid red;
}

.cont {
  width: 50%;
  margin: 0 auto;
  border: 1px solid green;
  display: table;
}

input {
  max-width: 50px;
}

label {
  border: 1px solid blue;
}

.lab {
  float: right;
}

<div class="site">
  <div class="cont">
    <form>
      <label>sasadsadas</label>
      <input type="number">
      <input type="number">
      <label class="lab">sasasdssadsa</label><br>
      <label>sasas</label>
      <input type="number">
      <input type="number">
      <label class="lab">sasdsadsa</label><br>
      <label>sasssas</label>
      <input type="number">
      <input type="number">
      <label class="lab">sasasdsaadsa</label><br>
      <label>sasaas</label>
      <input type="number">
      <input type="number">
      <label class="lab">sasasdsadsadsa</label>
    </form>
  </div>
</div>

Answer 1

使用 wrapper 50%，所以每一行都有两个 div。

选择奇数 div 的 .wrap 并设置 float 或 flex 或您想要的任何内容以将内容定位在左侧 wrap 中。

对右 wrapper 和中提琴做类似的事情。

.wrap {
  width: 50%;
  float: left;
}


/* left */
.wrap:nth-of-type(2n+1) { 
  background: orange;
}
.wrap:nth-of-type(2n+1) label{float:left;}
.wrap:nth-of-type(2n+1) input{float:right;}

/* right */
.wrap:nth-of-type(2n) {
  background: pink;
}
.wrap:nth-of-type(2n) input {float:left;}
.wrap:nth-of-type(2n) label {float:right;}


/* old setup */

.site {
  border: 1px solid red;
}

.cont {
  width: 80%;
  margin: 0 auto;
  border: 1px solid green;
  display: table;
}

input {
  max-width: 30px;
}

label {
  border: 1px solid blue;
}

<div class="site">
  <div class="cont">
    <form>
      <div class="wrap">
        <label>ssasadsadas</label>
        <input type="number">
      </div>
      <div class="wrap">
        <input type="number">
        <label>sasasdsffdsadsa</label>
      </div>
      <div class="wrap">
        <label>sdsadas</label>
        <input type="number">
      </div>
      <div class="wrap">
        <input type="number">
        <label>sadsa</label>
      </div>
      <div class="wrap">
        <label>sasadsxsddadas</label>
        <input type="number">
      </div>
      <div class="wrap">
        <input type="number">
        <label>sadssadsa</label>
      </div>
    </form>
  </div>
</div>