利用空格實現中文標題對齊效果

admin發表於2017-04-01

通常情況下標題能夠對齊的話，美觀度要好一些，如下圖所示:

a:3:{s:3:\"pic\";s:43:\"portal/201704/01/011010xo6bh6wza76co56y.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面就通過程式碼例項做一下介紹，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
ul{
  list-style-type:none; 
  font-size:12px;
}
.li{
  margin-top:10px;
}
</style>
</head>
<body>
<ul>
  <li class="li">姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" /></li>
  <li class="li">手&nbsp;&nbsp;&nbsp;&nbsp;號：<input type="text" /></li>
  <li class="li">電子郵箱：<input type="text" /></li>
</ul></body>
</html>

很多朋友會發現使用&nbsp;這個空格並不好用，確實如此，表現如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/01/011104pm8v95jjcmvj8kje.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面本章節的主角就要出現了，分別介紹如下:

（1）.&ensp;佔據的寬度正好是1/2箇中文寬度。

（2）.&emsp;佔據的寬度正好是1箇中文寬度。

所以使用上面任意一個都是可以的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
ul{
  list-style-type:none; 
  font-size:12px;
}
.li{
  margin-top:10px;
}
</style>
</head>
<body>
<ul>
  <li class="li">姓&emsp;&emsp;名：<input type="text" /></li>
  <li class="li">手&emsp;&emsp;號：<input type="text" /></li>
  <li class="li">電子郵箱：<input type="text" /></li>
</ul></body>
</html>

相關文章