CODEWITHSUNDEEP
htmlcss
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

displaying label and select in the following order

<label for="adults">Adults</label> 
<select name="audits">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select> 
<label for="children">Children</label> 
<select name="audits">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>

How to display label and select as the followings?

+------------+    +----------------+
|label       |    |label           |
+------------+    +----------------+
+------------+    +----------------+
|select      |    |select          |
+------------+    +----------------+

Upvotes: 1

Views: 70

Answers (3)

Erik D.
Erik D.

Reputation: 27

EDIT: After seeing that you don't want to add any additional markup, I may have a solution for you. You'll be re-ordering your markup slightly, but it will retain its semantic value.

One quick note: the for attribute in your label tag should match the name attribute in your select tags. I've changed the HTML to reflect that.

HTML: 

<label for="adults">Adults</label> 
<label for="children">Children</label> 
<select name="adults">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>
<select name="children">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>

CSS:

label, select {display: inline-block; float: left; width: 150px; margin: 0px 5px;}
select[name="adults"] {clear: both}

Upvotes: 0

cheersjosh
cheersjosh

Reputation: 1209

Surround each label and select group in a <div> and in CSS you can display: block the <label> and <select> then float: left the <div>.

<style>
    div { float: left; }
    label, select { display: block; }
</style>

<div>
<label for="adults">Adults</label> 
<select name="audits">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>
</div>
<div>
<label for="children">Children</label> 
<select name="audits">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select> 
</div>

Upvotes: 2

Jignesh Kheni
Jignesh Kheni

Reputation: 1302

<div class="l-one">
<label for="adults">Adults</label>
<select name="audits">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10+">10+</option>
</select>
</div>
<div class="l-two">
<label for="children">Children</label>
<select name="audits">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>

after adding div give to fix width of that <div> and give lable to dispaly:block and also give dispaly:block to <select>

Upvotes: 1

Related Questions