Question

这就是我的表单：

我的css是这样的：

.form select{

  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 200px;
  border: 0;
  margin: 0 0 15 0px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;

}
.form select:hover,.form select:active,.form select:focus {
  background: lightgoldenrodyellow;
}

表格是这样的：

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 950px;
  margin: 0 auto 100px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  width: 100%;
}

如何正确对齐？喜欢标签应该是左边的垂直对齐垂直对齐？下拉也应垂直对齐。

HTML就是这样：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="style.css">
        <script>
        $(document).ready(function() {
            $( "#datepicker" ).datepicker();
        });
        </script>
        <p>Date: <input type="text" id="datepicker"></p>
   <button onclick="printPage()" style="float:right">Print this page</button>

     <form name="form" method="POST">
        Select Category
            <select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
                 <option value="" disabled selected>Select Category</option>

            </select><br>
     </form>

        <br>

           <form method="POST">
                Select Item
            <select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
             <option value="" disabled selected>Select Item</option>

            </select><br>
            </form>


          <form name="form" method="POST">
            Select Vendor Name
            <select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
            <option value="" disabled selected>Select Vendor</option>

            </select><br>
        </form>


        Unit <input type="text" placeholder="Unit" id="Unit"><br>
        Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
        Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
        VAT <input type="text" placeholder="VAT" id="VAT"><br>
        Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
        Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
        Total <input type="text" placeholder="Total" id="Total"><br>
            <form method="POST">
            <input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">

        </form>

Answer 1

这与PHP无关。

将标签和表单输入放在左边以固定宽度浮动的div中：

<div class="labelContainer">
  <label for="input1">Input 1</label>
</div>
<div class="inputContainer">
  <select id="input1">
    <option>Option 11</option>
    <option>Option 12</option>
  </select>
</div>
<div class="labelContainer">
  <label for="input2">Input 2</label>
</div>
<div class="inputContainer">
  <select id="input2">
    <option>Option 21</option>
    <option>Option 22</option>
  </select>
</div>
<div class="labelContainer">
  <label for="input3">Input 3</label>
</div>
<div class="inputContainer">
  <select id="input3">
    <option>Option 31</option>
    <option>Option 32</option>
  </select>
</div>

CSS：

.labelContainer {
  clear: both;
  float: left;
  width: 200px;
}

.inputContainer {
  float: left;
  width: 200px;
}

Fiddle

Answer 2

将表单标签放入标签中并添加＆＃34; class = form-labels＆＃34;给他们。然后将以下代码添加到您的css

const rootReducer = (state, action) => {
    if (action.type === 'USER_LOGOUT') {
        state.NAME = undefined
    }
    return appReducer(state, action)
}

Answer 3

这里有一个改动你的css：https://jsfiddle.net/vjeqfuy2/7/

日期：

打印此页

 <form name="form" method="POST">
    Select Category
        <select name="category" id="category" value="category" class="form-control ddplaceholder">
             <option value="" disabled selected>Select Category</option>

        </select><br>
 </form>

    <br>

       <form method="POST">
            Select Item
        <select name="item_name" id="item_name" value="item_name" class="form-control ddplaceholder" >
         <option value="" disabled selected>Select Item</option>

        </select><br>
        </form>

      <form name="form" method="POST">
        Select Vendor Name
        <select name="vendor_name" id="vendor_name" value="vendor_name" class="form-control ddplaceholder">
        <option value="" disabled selected>Select Vendor</option>

        </select><br>
    </form>

    Unit <input type="text" placeholder="Unit" id="Unit"><br>
    Price per Unit <input type="text" placeholder="Price per Unit" id="Price_per_Unit"><br>
    Quantity <input type="text" placeholder="Quantity" id="Quantity"><br>
    VAT <input type="text" placeholder="VAT" id="VAT"><br>
    Freight Charges <input type="text" placeholder="Freight charges" id="Freight_charges"><br>
    Other Charges <input type="text" placeholder="Other Charges" id="Other_Charges"><br>
    Total <input type="text" placeholder="Total" id="Total"><br>
        <form method="POST">
        <input type="submit" name="submit" value="Update" style="width:150px;padding:10px;">

    </form>




form select{

  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #fff;
  width: 200px;
  border: 0;
  margin: 0 0 15px 0;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  height: 40px;
}
form select:hover, form select:active, form select:focus {
  background: lightgoldenrodyellow;
}

如何在下拉列表旁垂直对齐标签？

3 个答案: