html - 在标签的中心对齐输入字段和复选框

Question

我有许多标签及其文本字段和相应的复选框，如下所示。

我想将它们居中对齐，并在它们之间留出适当的间距。

这是 fiddle我正在尝试的地方。

目前在我的屏幕上，文本字段之间没有距离。

    <div class="col-sm-4">
                <table>
                    <tbody><tr>
                        <td><label for="">Design number</label></td>
                        <td><input type="text" name="Design number" value="SK123"></td>
                    </tr>

                    <tr>
                        <td><label for="">Price</label></td>
                        <td><input type="text" name="Price" value="500"><br><br></td>
                    </tr>

                    <tr>
                        <td><label for="">Never Out Of Stock</label></td>
                        <td><label><input type="checkbox" value=""><br><br></label></td>
                    </tr>

                     <tr>
                        <td><label for="">Pattern</label></td>
                        <td>
                        	<label> <input type="checkbox" value="">Stripes<br></label>
							<label><input type="checkbox" value="">Checks<br></label>
							<label><input type="checkbox" value="">Prints<br></label>
							<label><input type="checkbox" value="">Solid<br></label>
                        </td>
                    </tr>

                    <tr>
                        <td><label for="">Color</label></td>
                        <td>
                        <br><br>
                        	<label><input type="checkbox" value="">White<br></label>
							<label><input type="checkbox" value="">Blue<br></label>
							<label><input type="checkbox" value="">Green<br></label>
							<label><input type="checkbox" value="">Red<br></label>
							<label><input type="checkbox" value="">Yellow<br></label>
					    </td>
                    </tr>


                    <tr>
                        <td><label for="">Occasion</label></td>
                        <td>
                        <br><br>
                        	<label><input type="checkbox" value="">Casual<br></label>
							<label><input type="checkbox" value="">Fancy<br></label>
							<label><input type="checkbox" value="">Office<br></label>
					    </td>
                    </tr>

                    <tr>
                        <td><label for="">Fabric</label></td>
                        <td>
                        <br><br>
                        	<label><input type="checkbox" value="">Silk<br></label> 
							<label><input type="checkbox" value="">Denim<br></label> 
							<label><input type="checkbox" value="">Velvet<br></label> 
					    </td>
                    </tr>

                </tbody>
       </table>
            </div>

Answer 1

这是您的代码的良好(我希望)格式:

table {
  width:800px;
}
table td {
  width:70%;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom:solid 1px #dddddd;

  /* text-align: center; <---- If you want all aligned to the center. */
}
table td:first-child {
  width:30%;
}
label {
  min-width:75px;
  margin-left:10px;
}

input[type="checkbox"] {
  margin-right:5px;
}

我删除了“br”标签并添加了空格。

The JSFiddle