-1
私はspanと私inputを揃えたいので、私はHow to properly align the span and input elements?に続くが、私は私のspanが私のinputに合わせて、私はそれらを揃えることができれば、私はそれを取るよ、いくつかのspace.Soを得るために必要されていないので、私はミスをしたと思いますより少ないスペース。スパンと入力を整列する方法は？
私はここで間違っていましたか？
.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> </span>
<input class="saveModif" type="submit" value="Save" />
</label>
</form>
</div>[EDIT]それは私のためにそれは私が私のポストで記事を引用し、私は引用の答えと私の問題を解決することができなかったためではないですが、だまされやすい人ではありません役職。
？ –
@GeorgeGarchagudashviliそれはリンクされたポストにあります、私は私のスパンと私の入力を調整する必要があるので私はちょうど答えに従うことを知らない –
入力から 'margin-left'を取り除き、 'span' +' padding/margin' + 'input'要素が100％の' width'まで加算されるようにします。 –