Home > Article > Web Front-end > css文字两端对齐_html/css_WEB-ITnose
css文字两端对齐_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:43:431651browse
CSS
想要将班主任签署左右两端对齐家长签署，即：‘家’对齐‘班’、‘署’对齐‘署’。如图：回复讨论(解决方案)
css文字两端对齐
text-align:Justify(火狐);
text-justify:inter-ideograph(IE)
这是CSS的，只是不建议使用
告诉你个取巧的好方法家长签署:---------------具体多少像素你自己实验几下，我这样也看不出来。
一定要把最后一个字放在span之外，那样会保证最后的一个字和上面的署对齐。另外，这个在IE6下IE6会有点问题，可以这样改：家长签署： ----------自己调下具体的间距多少合适。
css文字两端对齐
text-align:Justify(火狐);
text-justify:inter-ideograph(IE)
这是CSS的，只是不建议使用
这个还是没法满足，单文字长度不够的时候还需要加上letter-spacing或word-spacing加大字符间距，但这个间距值也不能做到百分百的对齐
一定要把最后一个字放在span之外，那样会保证最后的一个字和上面的署对齐。另外，这个在IE6下IE6会有点问题，可以这样改：家长签署： ----------自己调下具体的间距多少合适。
这个我也使用了，但多少有点不完美，譬如说不全是中文。有没有更好的方法能做到绝对左右对齐
一定要把最后一个字放在span之外，那样会保证最后的一个字和上面的署对齐。另外，这个在IE6下IE6会有点问题，可以这样改：家长签署： ----------自己调下具体的间距多少合适。
这个我也使用了，但多少有点不完美，譬如说不全是中文。有没有更好的方法能做到绝对左右对齐
没有的
用CSS是没有的
我都是用的空格
全角的空格相当一个汉字，半角空格才相当半个汉字
建议使用全角的空格
一定要把最后一个字放在span之外，那样会保证最后的一个字和上面的署对齐。另外，这个在IE6下IE6会有点问题，可以这样改：家长签署： ----------自己调下具体的间距多少合适。
这个我也使用了，但多少有点不完美，譬如说不全是中文。有没有更好的方法能做到绝对左右对齐
不全是中文的就有点蛋疼了。这个还真没好办法。
写个方法吧
上下两行放到相同长度的div里，比如div宽度为100,div的id分别是 div1,div2 然后调用方法setDq()
function setDq(){
var d1=document.getElementById("div1");
var d2=document.getElementById("div2");
var rap1=(d1.offsetWidth-5*12)/(5-1);//5为d1的字体个数,12为字体的像素大小
var rap2=(d2.offsetWidth-4*12)/(4-1);//4为d2的字体个数,12为字体的像素大小
d1.style.wordSpace=rap1;//设置字体间距
d1.style.wordSpace=rap2;//设置字体间距
}
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
一定要把最后一个字放在span之外，那样会保证最后的一个字和上面的署对齐。另外，这个在IE6下IE6会有点问题，可以这样改：家长签署： ----------自己调下具体的间距多少合适。
这个我也使用了，但多少有点不完美，譬如说不全是中文。有没有更好的方法能做到绝对左右对齐
不全是中文的就有点蛋疼了。这个还真没好办法。
+1
有个操蛋的办法
| 班 | 主 | 任 | 签 | 署 |
| 家 | 长签 |
署 |
td{text-align:center;}
p{letter-spacing:xxpx}这里的数值根据实际情况设置。
有点操蛋这个办法，班主任那边也用表格的原因是因为 让td 的宽度比字稍微宽一点居中对齐之后 会稍微好看点。
有个操蛋的办法
| 班 | 主 | 任 | 签 | 署 |
| 家 | 长签 |
署 |
td{text-align:center;}
p{letter-spacing:xxpx}这里的数值根据实际情况设置。
有点操蛋这个办法，班主任那边也用表格的原因是因为 让td 的宽度比字稍微宽一点居中对齐之后 会稍微好看点。 还真是为达目的不择手段
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
参照楼上的几位，我写的HTML+CSS
但没有达到楼主说的那种效果
就想问问原因
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
参照楼上的几位，我写的HTML+CSS
但没有达到楼主说的那种效果
就想问问原因
哦哦，不是这样写的呢
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> div{width:100px;} .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="div1">班主任签署</div> <div class="div2">家长签署</div> </body></html> <!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
参照楼上的几位，我写的HTML+CSS
但没有达到楼主说的那种效果
就想问问原因
哦哦，是这样写的，如下（兼容及stongyann用table解决就不列出来了）：
<div class="div1">班主任签署</div><div class="div2">家签任署</div>方式一（已知div1,div2内容）：<style>.div2{ letter-spacing:5px;}</style>方式二（字符串长度大于div1或div2宽度）：<style>.div1,.div2{text-align:justify;text-justify:inter-ideograph;}</style>
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
参照楼上的几位，我写的HTML+CSS
但没有达到楼主说的那种效果
就想问问原因
楼主的是两个div或者一个div里面有两个li，一个li写班主任签署，另一个写家长签署，上下并排，让班主任签署这五个字与家长签署这四个字所占的宽度一样并且最后一个字和第一个字要对其，你自己写的这个貌似差强人意了。。。
发现自己重复引用了
<!DOCTYPE><html> <head> <title>123</title> <style type="text/css"> .box1{ width:80px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify; letter-spacing:0.5px; } </style> </head> <body> <div class="box1">班主任签署家长签署</div> </body></html> 不是很明白，请教下楼主
这个HTML应该怎么写
我也没明白你想要表达什么，跟我的贴有关？
参照楼上的几位，我写的HTML+CSS
但没有达到楼主说的那种效果
就想问问原因
楼主的是两个div或者一个div里面有两个li，一个li写班主任签署，另一个写家长签署，上下并排，让班主任签署这五个字与家长签署这四个字所占的宽度一样并且最后一个字和第一个字要对其，你自己写的这个貌似差强人意了。。。 Bingo！
有个操蛋的办法
| 班 | 主 | 任 | 签 | 署 |
| 家 | 长签 |
署 |
td{text-align:center;}
p{letter-spacing:xxpx}这里的数值根据实际情况设置。
有点操蛋这个办法，班主任那边也用表格的原因是因为 让td 的宽度比字稍微宽一点居中对齐之后 会稍微好看点。 还真是为达目的不择手段
其实都是欺骗人的眼睛的。美工设计一张图片 运用了多种手法欺骗了你的眼睛，制作运用了很多方法目的还不是为了来欺骗人的眼睛。能达到效果我想 就可以了。外行看热闹，内行看门道。而 客户 大多又是外行。 之前的回答如果真的对你有效 那就结贴吧。当让如果你还想等更加好的办法 可以继续等下去。
多套几个A标签好多方法，一个一个定义...
基本属于自己找麻烦