Правильно ли упорядочить элементы html?

У меня ниже html-страницы:

jsfiddle

<title>Extended UI</title>




 <div id="wrapper">
 <div id="score"><span>Score:</span><span>10</span></div>
 <div id="dd-1"><span>Has Account</span><span><select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select></span></div>
 <div id="dd-2"><span>Has House</span><span><select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select></span></div>
 <div id="dd-3"><span>Has Phone</span><span><select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select></span></div>
</div>

Все значения не отображаются в порядке. Как я могу правильно упорядочить все значения?

Благодарю!

4 ответа

Рабочая демонстрация здесь Jsfiddle Вот изменения Css, которые вы должны

.header{
 padding-right: 50px;
 min-width: 120px;
 display: inline-block;
}
.value{
 padding-left:50px; 
 display: inline-block;
}


Вы применяете дополнение к встроенному элементу, чтобы он не реплицировал ваши изменения, прежде всего, вы должны сделать это display:inline-block а затем укажите ширину в вашей структуре

Скрипт:http://jsfiddle.net/HarishBoke/8HgHe/


Как насчет использования простой таблицы?

<table>
 <tbody><tr>
 <td>Score:</td>
 <td>10</td>
 </tr>
 <tr>
 <td>Has Account:</td>
 <td>
 <select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Has House:</td>
 <td>
 <select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Has Phone:</td>
 <td>
 <select name="" id="">
 <option value="">Yes</option>
 <option value="">No</option>
 </select>
 </td>
 </tr>
</tbody></table>

FIDDLE


Вы не можете установить для встроенных элементов, но встроенный блок будет работать для вас.

.header {
 display: inline-block;
 width: 150px;
}

licensed under cc by-sa 3.0 with attribution.