Правильный выбор элементов html?

У меня есть ниже HTML-страницы:Правильный выбор элементов html?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Extended UI</title> 
<style type="text/css"> 

.header{ 
    padding-right:50px; 
} 
.value{ 
    padding-left:50px; 
} 

</style> 
</head> 

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

</body> 

</html>

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

Спасибо!

источник

2014-02-21 user755806

Заказ означает, вы говорите об углублении и положении? – Harish

Рабочая Демонстрационный здесь Jsfiddle

Вот Css изменения вы должны

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

источник

2014-02-21 11:31:29

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

<table> 
    <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> 
</table>

FIDDLE

источник

2014-02-21 11:28:54 yashhy

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

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

источник

2014-02-21 11:30:05 kirilloid

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

Fiddle:http://jsfiddle.net/HarishBoke/8HgHe/

источник

2014-02-21 11:32:39 Harish

Почему так сложно, может быть сделано только с одним селектором – davidkonrad

Да, мы можем добиться также с помощью селектора тегов, но я намеренно определяю классы, согласно его структуре – Harish

Правильный выбор элементов html?

ответ

Смежные вопросы