Автоматическое распределение выбора/полей ввода с пробелами

Question

Пусть у меня есть:

HTML:

<div class="row"> 
    <div class="col"> 
     <select name="day" style="width: 25%;"> 
     .... 
     </select> 

     <select name="month" style="width: 50%;"> 
     .... 
     </select> 

     <select name="year" style="width: 25%;"> 
     .... 
     </select> 
    </div> 
</div> 

CSS:

.row { display: table; width: 100%; } 
.col { display: table-cell; width: 50%; } 

Я хочу selects быть изложены с использованием полной ширины родительский DIV, например:

• день должен быть выровнен по левому
• месяц должен быть выровнен Центрировать
• год должны быть выровнены по правому краю

Там должен быть зазор (от около 10px) между этими полями, которые должны быть динамически рассчитывается.

Answer 1

Как this look? Использование DIV позволяет запрашивать 10px-разделение.

HTML:

<div> 
    <select> 
     <option>Select 1</option> 
    </select> 
</div><div> 
    <select> 
     <option>Select 1</option> 
    </select> 
</div><div> 
    <select> 
     <option>Select 1</option> 
    </select> 
</div> 

CSS:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 

body{ 
    margin:0; 
    width:100%; 
    padding:0; 
    box-sizing:border-box; 
} 
div{ 
    display:inline-block; 
} 
select{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 
div:nth-child(1){ 
    width:25%; 
    padding-right:10px; 
} 
div:nth-child(2){ 
    width:50%; 
} 
div:nth-child(3){ 
    padding-left:10px; 
    width:25%; 
} 

Answer 2

Не добавляйте несколько DIVs, или вам может понадобиться, чтобы добавить больше CSS.

Try this

<div class="row"> 
    <select name="day"> 
     <option>Sunday</option> 
    </select> 

    <select name="month"> 
     <option>January</option> 
    </select> 

    <select name="year"> 
     <option>2013</option> 
    </select> 

CSS

.row { display: table; width: 100%; } 
select{ 
    width:30%; 
    margin-right:10px; 
}