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

Question

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

我想将它们对齐在它们之间以及它们之间的适当间距。

这是我正在尝试的fiddle。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个很好的（我希望）代码格式：

use Storage;

public function deleteUser(Request $request)
{
    $user = User::find($request->id); 
    Storage::deleteDirectory('/files/'.$user->id);
    $user->delete();
    $user->websites()->delete();
    return redirect('/')->with('status','Customer removed');
}

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

The JSFiddle

Answer 2

Table.get();

看小提琴：https://jsfiddle.net/4xrfw842/1/

Answer 3

编辑您的HTML代码

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

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

                    <tr>
                        <td><label for="">Never Out Of Stock</label></td>
                        <td><label><input type="checkbox" value=""></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>

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

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

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

https://jsfiddle.net/4xrfw842/5/