8

Having this HTML

<select>
 <option>Foo</option>
</select>

<select>
 <option>Foo</option>
</select>

The secodn input is dispositioned. How to avoid this effect?

Grim
  • 1,938
  • 10
  • 56
  • 123

4 Answers4

3

The UTF character is taller than the text, so it is displacing the select box.

I've added a bit of CSS to fix it - vertical-align: middle to line the select boxes up with each other; and line-height: 1.75em to make the character visible.

select {
    vertical-align: middle;
    height: 1.75em;
}
<select>
 <option>Foo</option>
</select>

<select>
 <option>Foo</option>
</select>
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
3

Try this.

select {
    display: inline-block;
    vertical-align: middle;
}
<select>
 <option>Foo</option>
</select>

<select>
 <option>Foo</option>
</select>
Bagrat Zakaryan
  • 317
  • 1
  • 4
  • 20
1

This will solve your issue with the disposition of the two select elements. The trick was to give them position:relative; and float:left; which you can confirm by removing the height and margin-right and re-running:

.lineEmUp
{
  position:relative;
  float:left;
  height:28px;
  margin-right:5px;
}
<select class="lineEmUp">
  <option>Foo</option>
</select>

<select class="lineEmUp">
  <option>Foo</option>
</select>
Ivan86
  • 5,695
  • 2
  • 14
  • 30
0

Try This one 

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
       <select>
         <option>Foo</option>
         <option>☂Bar</option>
       </select>

      <select>
       <option>Foo</option>
       <option>Bar</option>
      </select>

    </body>
    </html>
Grim
  • 1,938
  • 10
  • 56
  • 123
Saurabh Mistry
  • 12,833
  • 5
  • 50
  • 71