CODEWITHSUNDEEP
htmldropdown
aerijman
aerijman

Reputation: 2762

specify label's position to be above of the dropdown menu in html

How can I specify the position of the label to be above the dropdown menu?

E.g.

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

Is there any style argument in <label for="cars">Choose a car:</label> that would place it above the menu?

Thank you!

Upvotes: 0

Views: 936

Answers (2)

user12009509
user12009509

Reputation:

Because label is an inline element, you can't give it a size unless you change its display option to block or inline-block

 <label for="cars" style="display:block;">Choose a car:</label>

MSDN explaination.

Upvotes: 1

aerijman
aerijman

Reputation: 2762

So far it worked this way:

Style should include display: inline-block and width: 10em; and the label tag should close after the select tag.

<form action="/action_page.php">
  <label for="cars" style="display: inline-block; width: 10em;">Choose a car:
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select></label>
  <input type="submit" value="Submit">
</form>

See here

I am still looking for a more thorough explanation to learn from!

Upvotes: 0

Related Questions