Question

我有以下css和html代码：

<style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
        border-radius: 1em;
    }

    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }

    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }

    br
    {
        clear: left;
    }
    .box_header {
  font-weight: 600;
  color: #000000;
  text-align: center;
  border-radius: 1em;

}
    </style>


   <div class="formLayout"  style="float:left; margin-left: 100px; margin-top:5em;">
            <div class="box_header">
             Install
    </div>
            <label>Type</label>
            <label>Amount</label>
            <label>Days</label>
            <br>
            <input id="type" name="type" size="25">
            <input id="amount" name="amount" size="5">
            <input id="days" name="days" size="5"><br>
        </div>

我正在尝试以表格格式创建它，以便所有单元格都很好地对齐。但由于某些原因，我无法正确对齐标签和输入框。有人可以帮我解决这个问题。

我希望它看起来像这样的例子：

<table align="center">
    <thead>
        <th>Type</th>
        <th>Amount</th>
        <th>Days</th>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>                                
    </tbody>
</table>

Answer 1

试试这个：

<强> CSS

.formLayout
{
    margin:auto;
    width:500px;
    border-radius:5px;
    border:1px solid #a1a1a1;
    background-color: #f3f3f3; 
}

.ins
{
    margin:auto;
}

.ins
{
    font-weight:bold;
    padding:10px;
}
.group-div
{
    text-align: center; 
}

.group-div td
{
    width:250px;
}

.group-div input[type="text"]
{
    padding:3px;
}

HTML CODE

<div class = "formLayout">
    <div class = "ins">
    <center>Install</center>
    </div>

    <div class = "group-div">
    <table>
    <tr><td><label>TYPE</label></td>    
        <td><label>AMOUNT</label></td>
        <td><label>DAYS</label></td></tr>       


    <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>
    </table>
    </div>

虽然看起来代码非常基本，但希望它仍有帮助。祝好运！：）

这是我的小提琴：http://jsfiddle.net/G4JRU/

Answer 2

我想这就是你要找的东西？..

enter image description here

http://jsfiddle.net/pMqkR/

   <div class="formLayout"  style="float:left; margin-left: 100px; margin-top:5em;">
        <div class="box_header">
             Install
        </div>
        <label>Type</label><input id="type" name="type" size="25">
        <label>Amount</label><input id="amount" name="amount" size="5">
        <label>Days</label><input id="days" name="days" size="5"><br>
   </div>

表格通过div和css格式化

2 个答案: