用CSS3设立P的对齐方式
日期：2014-05-17 浏览次数：20682 次
用CSS3设置P的对齐方式
下面的例子展示了你如何设置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" onchange="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
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
