写的一个段落标签文字内容两端对齐的代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin:0px;padding:0px;}
	p{background:red;width:300px;margin:0 auto;font-size:12px;white-space: nowrap;}
  </style>
  <script src="./jquery.js" type="text/javascript"></script>
  <script>
	$(function(){
		
		var oStr=$("#p1").html();
		var oFont=$("#p1").css("fontSize");
		oFont=parseInt(oFont);
		var fontLen=oStr.length;	
		var oTxtLen=fontLen*oFont;
		var oLeft=$("#p1").width()-oTxtLen;
		var oLP=oLeft/(fontLen-1);
		//alert(oLP);
		$("#p1").css({"letter-spacing":oLP+"px"});
	})
  </script>

 </head>
 <body>
	<p id="p1">我是中国人</p>
 </body>
</html>

注意点:p标签元素内字体要设置像素大小(font-size:00.00px;) 代码是用Jquery写的,需要JQuery基础知识。

 

posted @ 2014-07-26 09:50  宇宙第一小菜鸟  阅读(323)  评论(0编辑  收藏  举报