子div内的按钮位于同一位置

编程问答 2022-08-16

问题描述

我有3个div子级，每个div内都有一个按钮元素，如下图所示：

代码：

body {
  background-color: white;
}

input,select,textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
}

.Order_Create_Ship_Stock>div {
  display: table-cell;
  width: 10%;
  margin: 5px;
  border: solid;
}

.Order_Create_Ship_Stock {
  display: inline-table;
  border-spacing: 10px;
}

.Order_Create,.Order_Ship,.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

#SubmitCreateOrder,#SubmitShipOrder,#SubmitStoreOrder {
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.19);
  color: black;
  border: 2px solid #4caf50;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: auto;
}

#SubmitCreateOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitShipOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitStoreOrder:hover {
  background-color: #4caf50;
  color: white;
}
<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>
      <!-- Your Stuff -->
      <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>

我基本上希望Ship Order和Store Order按钮位于相同的高度。我遵循了其他一些帖子的建议，例如使用justify-content: flex-end，但是它们没有用...

我先感谢任何能帮助我的人：）。

解决方法

这可能不是最好的解决方案，但是可以工作。 这样您就可以玩了。

我添加了

.Order_Create,.Order_Ship,.Order_Store {
  ...
  padding: 20px 10px;
  position:relative;
}

和

#SubmitCreateOrder,#SubmitShipOrder,#SubmitStoreOrder {
  ...
  margin: auto;
  position: absolute;
  bottom: 5px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}


body {
  background-color: white;
}

input,select,textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
}

.Order_Create_Ship_Stock>div {
  display: table-cell;
  width: 10%;
  margin: 5px;
  border: solid;
}

.Order_Create_Ship_Stock {
  display: inline-table;
  border-spacing: 10px;
}

.Order_Create,.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 10px;
  position:relative;
}

#SubmitCreateOrder,#SubmitStoreOrder {
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.19);
  color: black;
  border: 2px solid #4caf50;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin: auto;
  position: absolute;
  bottom: 5px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}

#SubmitCreateOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitShipOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitStoreOrder:hover {
  background-color: #4caf50;
  color: white;
}
<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>
      <!-- Your Stuff -->
      <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>

html

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...