答:这里可以不用p标签,用其它标签也可以。p标签是块级元素,所以3个p标签不会在同一行显示,这里主要是为了更直观地向你说明text-align的作用。
2. 纵向对齐方式<p><img src="demo.gif" style="vertical-align">lpsum</p>这里style="vertical-align为什么又可以写到<img>里了呢?
答:因为img标签包含于p标签,所以这里的style="vertical-align:middle的结果是图片相对于p元素纵向居中对齐。
表单的位置如果用表格来安排的话,就比较容易整齐,而且IE6一样效果,不然就要用很多定位来控制各个元素。
表单行内对齐.html 代码清单如下:
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title> 表单行内对齐 </title>
<link rel="stylesheet" href="lineAlignment.css">
</head>
<body>
<table>
<tr>
<td class="liLabel"><span>账户类型:</span></td>
<td>
<input type="radio" name="f_01" id="" checked value="个人">个人
<input type="radio" name="f_01" id="" value="企业">企业
</td>
</tr>
<tr>
<td class="liLabel"><span>用户名:</span></td>
<td><input type="text" name="userName" id="userName"></td>
</tr>
</table>
</body>
</html>
lineAlignment.css 代码清单如下:
td {padding: 1em /* 表格单元格内边距控制行距 */
}
td.liLabel {
text-align: right /* 控制特定单元格左右对齐 */
}