CODEWITHSUNDEEP
htmlcssselect
Troy Reynolds
Troy Reynolds

Reputation: 68

Align Select boxes and text boxes

Drop down select boxes

This is what my front end currently looks like. I am trying to figure out how to get the drop down boxes to align to the right with each other. So they will all match with the one that is furthest out.

ID Equals Less Than Less Than or Equal To ">Greater Than =">Greater Than or Equal To

This is what one of the elements look like in HTML.

Upvotes: 1

Views: 5585

Answers (3)

arnolds
arnolds

Reputation: 788

For a dynamic solution without setting widths you will need to use 2 wrapper containers.

Btw I don't agree with the other commenters advising to use tables for layout, that's a big no-no. Tables should be used for data, not positioning.

ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
<ul>
  <li>text</li>
  <li>another example</li>
</ul>
<ul>
  <li>
    <select name="foo" id="foo">
      <option value="foo">foo</option>
    </select>
  </li>
    <li>
    <select name="bar" id="bar">
      <option value="bar">bar</option>
    </select>
  </li>
</ul>

Upvotes: 1

slayernoah
slayernoah

Reputation: 4492

Use a hidden table and place the elements in that. You can add CSS to it as needed.

<html>
    <head>
    </head>

    <body>
        <table>
            <tr>
                <td>Some text</td>
                    <td>
                        <select>
                          <option value="volvo">Volvo</option>
                          <option value="saab">Saab</option>
                          <option value="mercedes">Mercedes</option>
                          <option value="audi">Audi</option>
                        </select>
                    </td>
            </tr>
            <tr>
                <td>abc</td>
                <td>
                    <select>
                      <option value="volvo">Volvo</option>
                      <option value="saab">Saab</option>
                      <option value="mercedes">Mercedes</option>
                      <option value="audi">Audi</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

Upvotes: 0

theEpsilon
theEpsilon

Reputation: 1919

Put each inside a div with a width, say 90%, then float each box to the right.

Upvotes: 2

Related Questions