正確導入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，然後指定每個結構的寬度

小提琴：http://jsfiddle.net/HarishBoke/8HgHe/

來源

2014-02-21 11:32:39 Harish

爲什麼這麼複雜，可以用只有一個選擇器來完成 – davidkonrad

是的，我們也可以用標籤選擇器來實現，但是我有意用類定義，按照他的結構 – Harish

正確導入html元素的順序？

回答

相關問題