将文本框与表单内的标签对齐 & table

Question

我无法将复选框与表单下的标签对齐 table。

我也浏览了这些答案和一些网站。我还是没听懂。

How to align checkboxes and their labels consistently cross-browsers

我删除了我写的CSS，因为它不起作用。

td{
    color:#FFFFFF;
    background-color: #548EA3;
    border-spacing: 5px;
    border: 1px solid #FFFFFF;
        }

table,td{
    font-size: 15px;
    font-family: Georgia;
    border-radius: 6px;
    padding: 3px;
        }
    table input{
        width: 98%;
    }

<tr>
        <td>Possible charges involved</td>
        <td>
        <label><input type="checkbox" name="category" id="packing">Packing Charges</label>
        <label><input type="checkbox" name="category" id="Loading">Loading Charges</label>
        <label><input type="checkbox" name="category" id="Transportation">Transportation Charges</label>
        <label><input type="checkbox" name="category" id="Unloading">Unloading Charges</label>
        <label><input type="checkbox" name="category" id="Unpacking">Unpacking Charges</label>
        <label><input type="checkbox" name="category" id="Escort">Escort Charges</label>
        <label><input type="checkbox" name="category" id="Octroi">Octroi Charges</label>
        </td>
    </tr>

Answer 1

css flex 通常是构建网站的重要工具，您可以在这里阅读 https://css-tricks.com/snippets/css/a-guide-to-flexbox/,

对于您在此处编写的代码，我已使用 css flex

对其进行了编辑

注意：要查看差异，请尝试删除 align-items:center。

td{
    /*My Css Edits start*/
    display: flex;
    justify-content: center;
    align-items:center;
    /*My Css Edits end*/
    color:#FFFFFF;
    background-color: #548EA3;
    border-spacing: 5px;
    border: 1px solid #FFFFFF;
        }

table,td{
    font-size: 15px;
    font-family: Georgia;
    border-radius: 6px;
    padding: 3px;
        }

   

<table>
     <tr>
        <td>Possible charges involved</td>
        <td>
        <label>Packing Charges</label>
        <input type="checkbox" name="category" id="packing">
        </td>
   </tr>
  </table>

Answer 2

使用输入宽度作为 98%。这就是为什么它会那样来。删除提到的 CSS 并将宽度属性与另一个 select 一起使用或正在做这项工作。

就像我为“select 你当前所在的城市”使用宽度 98% 一样。我已经为它分配了 class。并使用它。删除这个 CSS 就可以了。

table input{
width: 98%;
}

将文本框与表单内的标签对齐 & table

Align Textboxes with label inside form & table

html

css

checkbox

label