如何将三个下拉选项彼此相邻放置

Question

如何将所有三个下拉选项彼此相邻放置？

<div class="form-group col-md-6">
   <select class="form-control" id ="numberRooms">
       <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 id="numberBeds">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select name="Year" id="year">
        <option value="2013">2013</option>
        <option value="2012">2012</option>
        <option selected value="2011">2011</option>
    </select>                    
</div>

我无法将三个下拉菜单彼此相邻放置。每个下拉菜单应该相互接触，并且应该彼此靠近。我想用css3来做。如何将所有三个下拉选项彼此相邻放置？

Answer 1

您可以使用font-size：0消除它们之间的间隙，因为它们之间用换行符char分隔

#nogap {
  font-size: 0;
}

<div id="nogap" class="form-group col-md-6">
  <select class="form-control" id="numberRooms">
    <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 id="numberBeds">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select name="Year" id="year">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option selected value="2011">2011</option>
  </select>
</div>