如何对齐量程和输入？

Question

我想调整我的span和我的input所以我跟着How to properly align the span and input elements?，但我认为我犯了一个错误，因为我的span与input不一致我需要获得一些空间。所以如果我能够对齐它们，它将占用更少的空间。

我在这里弄错了什么？

.form-style-2{
    max-width: 600px;
    padding: 10px 10px 2px 10px;
    font: 13px Arial, Helvetica, sans-serif;
    background-color: blue;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display:block;
    font-size: 15px;
}

.form-style-2 label > span{
    font-weight: bold;
    padding-right: 5px;
}
.form-style-2 span.required{
    color:red;
}

.form-style-2 input.input-field, input.nameModif, input.env, input.vol, input.port, input.expose, input.dependsOn{
  position: relative;
  top: -1px;
  margin-left: 20%;
  width: 80%;
  margin-bottom: 5px;
}

.form-style-2 a.addEnv, a.addVol, a.addPort, a.addExpose, a.addDependsOn{
  margin-left: 30%;
}

.form-style-2 input.input-field{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style-2 .input-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
    border: none;
    padding: 5px 5px 5px 5px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
    background: #EA7B00;
    color: #fff;
}

  <div class="form-style-2">
    <div class="form-style-2-heading">Oye oye</div>
    <form action="" method="post">
      <label for="field1">
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" name="field2" value="e1" />
      </label>
    <label for="field2">
      <span>Environment
      </span>
      <input type="text" class="input-field env" name="field2" value="e1" />
      <input type="text" class="input-field env" name="field2" value="e2" />
      <input type="text" class="input-field env" name="field2" value="e3" />
      <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field3">
      <span>Volumes
      </span>
      <input type="text" class="input-field vol" name="field2" value="v1" />
      <input type="text" class="input-field vol" name="field2" value="v2" />
      <input type="text" class="input-field vol" name="field2" value="v3" />
      <a class="addVol" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field4">
      <span>Ports
      </span>
      <input type="text" class="input-field port" name="field2" value="p1" />
      <input type="text" class="input-field port" name="field2" value="p2" />
      <a class="addPort" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field5">
      <span>Expose
      </span>
      <input type="text" class="input-field expose" name="field2" value="ex1" />
      <input type="text" class="input-field expose" name="field2" value="ex2" />
      <a class="addExpose" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field6">
      <span>Depends on
      </span>
      <input type="text" class="input-field dependsOn" name="field2" value="d1" />
      <input type="text" class="input-field dependsOn" name="field2" value="d2" />
      <a class="addDependsOn" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label>
      <span>&nbsp;</span>
      <input class="saveModif" type="submit" value="Save" />
    </label>
    </form>
    </div>

[编辑]这不是一个骗局，对我而言，这不是一个，因为我在帖子中引用了帖子而且我无法通过引用帖子的答案来解决我的问题。

Answer 1

您需要进行一些更改，在width和input-box中添加span并删除margin-left。

		.form-style-2{
    max-width: 600px;
    padding: 10px 10px 2px 10px;
    font: 13px Arial, Helvetica, sans-serif;
    background-color: blue;
}
.form-style-2-heading{
    font-weight: bold;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    font-size: 15px;
    padding-bottom: 3px;
}
.form-style-2 label{
    display:table;
    width: 100%;
    font-size: 15px;
}

.form-style-2 label > span{
    font-weight: bold;
    padding-right: 5px;
    width:25%;
    /*display:inline-block;*/
    display: table-cell;
}
.form-style-2 span.required{
    color:red;
}

.form-style-2 input.input-field, input.nameModif, input.env, input.vol, input.port, input.expose, input.dependsOn{
  position: relative;
  top: -1px;
/*  margin-left: 20%;*/
  width: 80%;
  margin-bottom: 5px;
}

.form-style-2 a.addEnv, a.addVol, a.addPort, a.addExpose, a.addDependsOn{
 /* margin-left: 30%;*/
}
.form-style-2 input.input-field {
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    box-sizing: border-box;
    display: table-cell;
    margin: 4px;
    outline: medium none;
    padding: 7px;
    width: 31%;
}
.form-style-2 .input-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
    border: none;
    padding: 5px 5px 5px 5px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
    background: #EA7B00;
    color: #fff;
}

<div class="form-style-2">
    <div class="form-style-2-heading">Oye oye</div>
    <form action="" method="post">
      <label for="field1">
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" name="field2" value="e1" />
      </label>
    <label for="field2">
      <span>Environment
      </span>
      <input type="text" class="input-field env" name="field2" value="e1" />
      <input type="text" class="input-field env" name="field2" value="e2" />
      <input type="text" class="input-field env" name="field2" value="e3" />
      <input type="text" class="input-field env" name="field2" value="e3" /><input type="text" class="input-field env" name="field2" value="e3" /><input type="text" class="input-field env" name="field2" value="e3" />
      <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field3">
      <span>Volumes
      </span>
      <input type="text" class="input-field vol" name="field2" value="v1" />
      <input type="text" class="input-field vol" name="field2" value="v2" />
      <input type="text" class="input-field vol" name="field2" value="v3" />
      <a class="addVol" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field4">
      <span>Ports
      </span>
      <input type="text" class="input-field port" name="field2" value="p1" />
      <input type="text" class="input-field port" name="field2" value="p2" />
      <a class="addPort" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field5">
      <span>Expose
      </span>
      <input type="text" class="input-field expose" name="field2" value="ex1" />
      <input type="text" class="input-field expose" name="field2" value="ex2" />
      <a class="addExpose" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label for="field6">
      <span>Depends on
      </span>
      <input type="text" class="input-field dependsOn" name="field2" value="d1" />
      <input type="text" class="input-field dependsOn" name="field2" value="d2" />
      <a class="addDependsOn" aria-expanded="false"><i class="fa fa-plus"></i></a>
    </label>
    <label>
      <span>&nbsp;</span>
      <input class="saveModif" type="submit" value="Save" />
    </label>
    </form>
    </div>