CSS如何中心輸入

Question

我有這樣的Codepen

我如何才能使輸入始終位於div .cont中心，並在左側和右側放置標簽。 不管標簽多長。 我不知道標簽會長多少集。 （一組代表標簽，輸入，輸入和標簽）

碼：

 .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

它應該工作：

 .container { display: flex; justify-content: space-between; } 

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

Answer 2

使用包裝器50％，因此每一行都有兩個div。

選擇奇數div的.wrap並設置float或flex或任何您想在左包裝中定位內容的內容。

對右包裝器和中提琴做類似的事情。

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