对齐For循环中的按钮

时间：2014-10-20 00:41:42

标签： html css alignment

这是我目前的HTML代码：

<title>Cashier/Customer Application</title>
</head>


<body>

<h1>Cashier/Customer Application</h1>

<div id="createOrderDiv">
    <input id="createOrderButton" type="button" value="New Order" onClick="showOrderOptions();"/>
</div>


    <div id="createOrderTable" style="display:none;">
        <form action='Controller' method='POST'>            
            <table>
                <tr>
                    <td>Coffee Type:</td>
                    <td>
                        <select name="orderType" id="coffeeType">
                            <option value="espresso">Espresso</option>
                            <option value="macchiato">Macchiato</option>    
                            <option value="cappuccino">Cappuccino</option>          
                        </select>
                    </td>           
                </tr>
                <tr>
                    <td>Addition Type:</td>
                    <td>
                        <select name="orderAddition" id="additionType">
                            <option value="skimMilk">Skim Milk</option>
                            <option value="extraShot">Extra Shot</option>   
                        </select>
                    </td>           
                </tr>
                <tr>
                    <td><input name="submitOrderBtn" type="submit" value="Submit Order" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
            </table>
        </form> 
    </div>

<h2>Open Orders</h2>
<div id="openOrderTable">
    <form action='Controller' method='POST'>
        <table>
            <c:forEach var="item" items="${openOrders}">    

                 <tr style="text-align:center;">                             
                    <td><input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                 <tr style="text-align:center;">                             
                    <td><input name="button${item.id}" id="cancel:${item.id}" type="submit" value="Cancel" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="update:${item.id}" type="submit" value="Update" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td>
                        <select name="updateType${item.id}">
                            <option value="cappuccino">Cappuccino</option>
                            <option value="espresso">Espresso</option>
                            <option value="macchiato">Macchiato</option>
                        </select>
                    </td>
                    <td>
                        <select name="updateAddition${item.id}">
                            <option value="">None</option>
                            <option value="skimMilk">Skim Milk</option>
                            <option value="extraShot">Extra Shot</option>
                        </select>                   
                    </td>
                <tr style="text-align:center;">                          
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="pay:${item.id}" type="submit" value="Pay" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
                <tr style="text-align:center;">                          
                    <td>
                        <select name="paymentType${item.id}">
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                        </select>
                    </td>
                    <td>
                        Name: <input type="text" name="name${item.id}"><br>
                    </td>
                    <td>
                        Card No: <input type="text" name="cardNo${item.id}"><br>
                    </td>
                    <td>
                        Expires: <input type="text" name="expires${item.id}"><br>
                    </td>
                </tr>
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="option:${item.id}" type="submit" value="Option" onClick="changeGetOrderID(this.id)"/></td>               
                </tr>               
            </c:forEach>                
         </table>
         <input type="hidden" name="orderID" id="orderID" value=""> 

        <h2>Cancelled Orders</h2>
            <table>
            <c:forEach var="item" items="${cancelledOrders}">
                <tr style="text-align:center;">                          
                    <td><input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)"/></td>
                </tr>
            </c:forEach>                
         </table>    
    </form> 
</div>

<h2>Result</h2>

</body>
</html>

这是我的CSS：

@CHARSET "ISO-8859-1";

h1,h2 {
    text-align:center;
}

#createOrderDiv {
    text-align:center;  
}

#createOrderTable{
    text-align:center;  
}

table {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}


body{

    font-family: Verdana, Arial, sans-serif;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    padding: 20px;    
}

这产生以下结果：

enter image description here

我正试图让所有按钮和下拉框在中心对齐，就像Cancelled Orders和button下面的对齐方式一样。

有人会有任何提示去实现这个目标吗？

感谢您的帮助。

1 个答案:

答案 0 :(得分：0)

只需将下面的CSS添加到样式表中：

tr td {
     display: block;
}

＆＃13;
＆＃13; 
h1,
h2 {
  text-align: center;
}
#createOrderDiv {
  text-align: center;
}
#createOrderTable {
  text-align: center;
}
table {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
body {
  font-family: Verdana, Arial, sans-serif;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  padding: 20px;
}
tr td {
  display: block;
}
＆＃13; 
<h1>Cashier/Customer Application</h1>

<div id="createOrderDiv">
  <input id="createOrderButton" type="button" value="New Order" onClick="showOrderOptions();" />
</div>


<div id="createOrderTable" style="display:none;">
  <form action='Controller' method='POST'>
    <table>
      <tr>
        <td>Coffee Type:</td>
        <td>
          <select name="orderType" id="coffeeType">
            <option value="espresso">Espresso</option>
            <option value="macchiato">Macchiato</option>
            <option value="cappuccino">Cappuccino</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Addition Type:</td>
        <td>
          <select name="orderAddition" id="additionType">
            <option value="skimMilk">Skim Milk</option>
            <option value="extraShot">Extra Shot</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input name="submitOrderBtn" type="submit" value="Submit Order" onClick="changeGetOrderID(this.id)" />
        </td>
      </tr>
    </table>
  </form>
</div>

<h2>Open Orders</h2>
<div id="openOrderTable">
  <form action='Controller' method='POST'>
    <table>
      <c:forEach var="item" items="${openOrders}">

        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="cancel:${item.id}" type="submit" value="Cancel" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="update:${item.id}" type="submit" value="Update" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
        <tr style="text-align:center;">
          <td>
            <select name="updateType${item.id}">
              <option value="cappuccino">Cappuccino</option>
              <option value="espresso">Espresso</option>
              <option value="macchiato">Macchiato</option>
            </select>
          </td>
          <td>
            <select name="updateAddition${item.id}">
              <option value="">None</option>
              <option value="skimMilk">Skim Milk</option>
              <option value="extraShot">Extra Shot</option>
            </select>
          </td>
          <tr style="text-align:center;">
            <tr style="text-align:center;">
              <td>
                <input name="button${item.id}" id="pay:${item.id}" type="submit" value="Pay" onClick="changeGetOrderID(this.id)" />
              </td>
            </tr>
            <tr style="text-align:center;">
              <td>
                <select name="paymentType${item.id}">
                  <option value="cash">Cash</option>
                  <option value="card">Card</option>
                </select>
              </td>
              <td>
                Name:
                <input type="text" name="name${item.id}">
                <br>
              </td>
              <td>
                Card No:
                <input type="text" name="cardNo${item.id}">
                <br>
              </td>
              <td>
                Expires:
                <input type="text" name="expires${item.id}">
                <br>
              </td>
            </tr>
            <tr style="text-align:center;">
              <td>
                <input name="button${item.id}" id="option:${item.id}" type="submit" value="Option" onClick="changeGetOrderID(this.id)" />
              </td>
            </tr>
      </c:forEach>
    </table>
    <input type="hidden" name="orderID" id="orderID" value="">

    <h2>Cancelled Orders</h2>
    <table>
      <c:forEach var="item" items="${cancelledOrders}">
        <tr style="text-align:center;">
          <td>
            <input name="button${item.id}" id="order:${item.id}" type="submit" value="- Coffee Order ${item.id}" onClick="changeGetOrderID(this.id)" />
          </td>
        </tr>
      </c:forEach>
    </table>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题