css - 通过 div 和 css 进行类似表格的格式

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 代码

<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>

虽然这些代码看起来很基础，但希望它能有所帮助。祝你好运! :)

这是我的 fiddle :http://jsfiddle.net/G4JRU/