如何解决输入和按钮在子div内居中
我有一个父div,其中有3个子div。我需要每个子div占用屏幕的三分之一,并且每个div内的所有元素(文本,按钮和输入)都必须始终位于子div的中心以进行响应。
我可以做出这样的排序:每个子div占据屏幕的三分之一,但是元素没有响应,并且将自己潜入子div的两列中,如下图所示:
以下是使用的代码:
input,select,textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.Order_Create_Ship_Stock>div {
width: 30%;
margin: 5px;
padding: auto;
display: inline-table;
border: solid;
}
.Order_Create,.Order_Ship,.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
display: table-cell;
}
#SubmitCreateOrder,#SubmitShipOrder,#SubmitStoreOrder {
cursor: pointer;
display: flex;
flex-direction: column;
}
<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
<div id="OrderCreate" class="Order_Create">
<form onsubmit="App.createOrder(); return false">
<label for="BarcodeInput">
<span>Barcode</span>
<input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
</label>
<label for="OwnerInput">
<span>Owner</span>
<input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
</label>
<label for="ProductListInput">
<span>Product list</span>
<input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
</label>
<label for="ExpirationDateInput">
<span>Expiration date</span>
<input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
</label>
<label for="TemperatureMinimalInput">
<span>Temperature minimal</span>
<input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
</label>
<label for="TemperatureMaximalInput">
<span>Temperature maximal</span>
<input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<label for="FinalDestinationInput">
<span>Final destination</span>
<input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
</label>
<button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
</form>
</div>
<div id="OrderShip" class="Order_Ship">
<form onsubmit="App.ShipOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
</select>
</label>
<label for="AnticipatedDateInput">
<span>Anticipated date</span>
<input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
</label>
<label for="DestinationInput">
<span>Destination</span>
<input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
</label>
<button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
</form>
</div>
<div id="OrderStore" class="Order_Store">
<form onsubmit="App.storeOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
</form>
</div>
</div>
当我在工作时,我可以使用flexbox(flex-direction:column)以某种方式使按钮保留在一列中,但是这种方法不适用于输入和文本区域...
因此,我想请一些帮助,以使这些子div中的所有元素仅保留在一列中。
在此先感谢任何愿意花时间帮助我的人。
解决方法
对于按钮,增加边距:自动,居中放置任何孩子都可以完成这项工作,如果您认为将其设为完整按钮有用,我会在第一个按钮中添加一个选项。
还可以使容器响应,您可以将父级设置为弹性框。然后使用flex:1设置所有子项,并使用媒体查询将其设置为列。
/* --- FOR THE CONTAINERS --- */
#OrderCreateShipStock {
display: flex;
}
.Order_Create_Ship_Stock>div {
margin: 5px;
border: solid;
flex: 1;
}
@media only screen and (max-width: 800px) {
#OrderCreateShipStock {
flex-wrap: wrap;
flex-direction: column;
}
}
/* --- BUTTON CENTERED --- */
#SubmitCreateOrder,#SubmitShipOrder,#SubmitStoreOrder {
display: flex;
margin: auto;
}
/* --- BUTTON FULL CENTERED TEXT --- */
#SubmitCreateOrder,#SubmitStoreOrder {
width: 100%;
justify-content: center;
align-items: center;
}
input,select,textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#OrderCreateShipStock {
display: flex;
}
.Order_Create_Ship_Stock>div {
margin: 5px;
border: solid;
flex: 1;
}
.Order_Create,.Order_Ship,.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
display: table-cell;
}
#SubmitCreateOrder,#SubmitStoreOrder {
display: flex;
margin: auto;
}
#SubmitCreateOrder {
width: 100%;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 500px) {
#OrderCreateShipStock {
flex-wrap: wrap;
flex-direction: column;
}
}
<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
<div id="OrderCreate" class="Order_Create">
<form onsubmit="App.createOrder(); return false">
<label for="BarcodeInput">
<span>Barcode</span>
<input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
</label>
<label for="OwnerInput">
<span>Owner</span>
<input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
</label>
<label for="ProductListInput">
<span>Product list</span>
<input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
</label>
<label for="ExpirationDateInput">
<span>Expiration date</span>
<input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
</label>
<label for="TemperatureMinimalInput">
<span>Temperature minimal</span>
<input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
</label>
<label for="TemperatureMaximalInput">
<span>Temperature maximal</span>
<input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<label for="FinalDestinationInput">
<span>Final destination</span>
<input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
</label>
<button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
</form>
</div>
<div id="OrderShip" class="Order_Ship">
<form onsubmit="App.ShipOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
</select>
</label>
<label for="AnticipatedDateInput">
<span>Anticipated date</span>
<input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
</label>
<label for="DestinationInput">
<span>Destination</span>
<input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
</label>
<button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
</form>
</div>
<div id="OrderStore" class="Order_Store">
<form onsubmit="App.storeOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
</form>
</div>
</div>
,
刚发现错误,我只需要添加到标签而不是输入,请选择以下内容:
display: flex;
flex-direction: column;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。