Horizontally Align Options In Select?

I am working on styling an option tag for a project I am working on but I am unable to figure out if it is even possible to horizontally align the option tags in my select box. Thi

Solution 1:

You simply need to use display:inline-block; with the select options:

#drink-holder select option {
  display:inline-block;
}

Demo:

*:focus {
    outline: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  padding:10px;
  margin:-5px -20px -5px -5px;
}

#drink-holder select option {
  display:inline-block;
}

#drink-holder {
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
}

<divid="drink-holder"><selectsize="6"><optionselected>Water</option><option>Apple Juice</option><option>Orange Juice</option><option>Milk</option><option>Coffee</option><option>Sports Drink</option></select></div>