對齊一組標籤和值

我是新的HTML和CSS所以很難如何對齊像截圖一樣的所有分號？對齊一組標籤和值

PSD樣子：

PSD look like

這裏是我的HTML標記

<ul> 
    <li>Name <span>: John Doe</span></li> 
    <li>Age <span>: 30.30.30</span></li> 
</ul>

，這是CSS

li span { 
    padding-left: 20px; 
}

，其結果是screeshot：

Result of my markup

什麼將適當的標記和CSS呢？

來源

2017-08-24 Md Foysal

你可以把你的名字：等在一個範圍內，並給這個跨度固定寬度的類。或者用一個表來代替。 – Robert

您可以使用表格結構。 –

使用display:table-row爲li和display:table-cell爲label秒。

li { 
 
    padding-left: 20px; 
 
    display: table-row; 
 
} 
 

 
li label { 
 
    display: table-cell; 
 
} 
 

 
li label:not(:first-child) { 
 
    padding-left: 40px; 
 
}

<ul> 
 
    <li><label>Name</label><label>: John Doe</label></li> 
 
    <li><label>Age</label><label>: 30.30.30</label></li> 
 
</ul>

來源

2017-08-24 05:19:49 Ehsan

好的另一種解決方案。踢

li { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
span { 
 
    width: 400px; 
 
    text-align: left; 
 
}

<ul> 
 
    <li><span>Name</span><span>: John Doe</span></li> 
 
    <li><span>Another Thing</span><span>: John Woe</span></li> 
 
    <li><span>Finally</span><span>: Another last thing</span></li> 
 
</ul>

來源

2017-08-24 05:18:47 archae0pteryx

如果第二個「李」是家庭？ – Ehsan

對不起。我不明白你的問題。像那樣？ – archae0pteryx

好的，查看更新後的帖子中的結果。 – Ehsan

<table> 
 
<tr> 
 
    <td>Name </td><td>: </td><td> John Doe</td> 
 
</tr> 
 
<tr> 
 
    <td>Age </td><td>: </td><td> 30.30.30</td> 
 
</tr> 
 
</table>

來源

2017-08-24 05:19:42

2種方式就可以實現。

使用table

<table> 
    <tr> 
     <td>Name</td> 
     <td>: John</td> 
    </tr> 
</table>

或者，如果你想使用ul和li

<ul> 
    <li><span>Name </span><span>: John Doe</span></li> 
    <li><span>Age </span><span>: 30.30.30</span></li> 
</ul> 

li span:first-child { 
    width: 200px; 
}

來源

2017-08-24 05:21:05

希望這將幫助你

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
    <tr> 
 
    <td>Name</td> 
 
    <td>John Doe</td> 
 
    <tr> 
 
    <td>Age</td> 
 
    <td>30.30.30</td> 
 
    </tr> 
 
</table> 
 

 
</body> 
 
</html>

來源

2017-08-24 05:21:05

您可以使用表這裏是這樣的：

<tbody class="table" > 
    <tr> 
     <td>Name</td> 
     <td>$100</td> 
    </tr> 
    <tr> 
     <td>Age</td> 
     <td>$80</td> 
    </tr> 
    <tr> 
     <td>Job</td> 
     <td>$80</td> 
    </tr> 
    </tbody> 
</table>

和CSS

.table td{ 
    padding-left: 3em; 
}

希望這demo將幫助您

來源

2017-08-24 05:35:34 jesusverma

對齊一組標籤和值

回答

相關問題