3

I have an HTML select options with text I would like to group into columns that are aligned. I tried using inline-block:

<select>
  <option><span div="display:inline-block;width:3em;">A:</span><span style="display:inline-block;width:5em;">Lorem Ipsum</span>
  </option>
  <option><span div="display:inline-block;width:3em;">AA:</span><span style="display:inline-block;width:5em;">Fusce efficitur ante</span>
  </option>
</select>

I want to get the output:

A   Lorem Ipum
AA  Fusce efficitur ante

Is there any Twitter Bootstrap for this?

Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
Jaime Dolor jr.
  • 897
  • 1
  • 11
  • 28

1 Answers1

1

Unfortunately, we can't set the style for option element, except to background-color and color.

But we can try to use &nbsp; and monospaced font like courier.

select, option {
  font-family: courier;
}
<select>
  <option>A:&nbsp;&nbsp;Lorem Ipsum</option>
  <option>AA:&nbsp;Fusce efficitur ante</option>
</select>
Community
  • 1
  • 1
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68