Search code examples
htmlcsscheckboxlabel

Align Textboxes with label inside form & table

enter image description here

I'm not able to align checkboxes with labels under a form & a table.

I went through these answers & some websites too. I'm still not getting it.

How to align checkboxes and their labels consistently cross-browsers

I removed the CSS I wrote, as it didn't work.

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>

Solution

  • enter image description hereusing input width as 98%. That's why it's coming like that. Removing the mentioned CSS & using the width property with another selector is doing the job.

    like I was using width 98% for "select your current city". I've assigned a class to that. and used that. removing this CSS does the job.

    table input{
width: 98%;
}