下面的例子展示了你如何设置P标签的对齐方式，采用text-align。
<!DOCTYPE html>
<html>
<head>
<title>Setting the text alignment on a text element using CSS</title>
<style type="text/css">
#appControlBar {
background: #ccc;
padding: 5px;
}
body {
margin: 0;
}
p {
border: 1px solid #ccc;
margin: 20px;
text-align: left;
line-height: 1.2em;
}
</style>
</head>
<body>
<div id="appControlBar">
<label >text-align:
<select id="sel1" οnchange="algn_changeHandler();">
<option>left</option>
<option>right</option>
<option>center</option>
<option>justify</option>
</select>
</label>
</div>
<p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies, lorem vitae iaculis lobortis, nunc libero rhoncus metus, vel auctor tortor nisi non quam. Nunc rutrum aliquam massa at ornare. Vivamus fringilla sapien ut diam lobortis consectetur. Maecenas iaculis risus at urna malesuada commodo ornare est volutpat. Suspendisse eget tristique magna. Nam sapien velit, pulvinar eu imperdiet ac, ullamcorper a turpis. Maecenas in quam erat. Aliquam elementum lorem quis est cursus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut fermentum congue pharetra.</p>
<script type="text/javascript">
function algn_changeHandler() {
document.getElementById("para1").style["text-align"] = document.getElementById("sel1").value;
}
</script>
</body>
</html>
源码下载：
setting-the-text-alignment-on-a-text-element-using-css.zip
5937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
