Home/ Questions/Q 8329671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T01:52:12+00:00

I have some HTML that displays a text input and 2 checkboxes side by

  • 0

I have some HTML that displays a text input and 2 checkboxes side by side. The HTML is generated by a tool and so I cannot alter the way the HTML is built, I can only apply styling to it using CSS. My simplified HTML and CSS is:

<html>
 <head>
  <style type="text/css">
  td {
    padding: 0;
    }
  fieldset {
    display: inline;
    padding: 0;
    margin: 0
    }
  input[type="text"] {
    margin: 0;
    padding: 0;
    }
  table.checkboxs  {
    border-collapse:collapse;
    }
  table.checkboxs td {
    border: none;
    margin: 0;
    padding: 0;
  }
 </style>
 </head>
 <body>
     <input type="text" id="item1" value="" />
     <fieldset>
      <table summary="" class="checkboxs" border-collapse="">
       <tr>
        <td><input type="checkbox" id="chkbox_0" name="chkbox" value="1"   /><label for="chkbox_0">One</label></td>
        <td><input type="checkbox" id="chkbox_1" name="chkbox" value="2"   /><label for="chkbox_1">Two</label></td>
       </tr>
      </table>
     </fieldset>
 </body>
</html>

This ends up with the checkboxes displayed higher up than the text item like this:

Screenshot 1

What I would like is them aligned together like this:

Screenshot 2

That seems simple enough, but I cannot figure out how to achieve it. If you remove either the text input or the fieldset then the remaining element takes up the minimum vertical space, it is only when they are together that the text input gets pushed down the page.

By all means point out any shortcomings in the HTML, but as I said that is really not under my control, I can only influence the layout using CSS.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are two quick solutions I can think of. The first is to get the table to behave and align more like regular text by setting:

    table.checkboxs {
    display:inline-block;
    vertical-align:middle;
}

    JSFiddle example

    Or by aligning the textbox to behave more like the table:

    input[type="text"] {
    vertical-align:top;
}

    JSFiddle example

    • 0