CSS テキストを両端揃え_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS

クラス教師の署名の左側と右側を保護者の署名と揃えたい場合、つまり、「home」は「class」と揃えられ、「Department」は「Department」と揃えられます。図に示すように:

ディスカッションへの返信 (解決策)

CSS テキストの両端揃え
text-align:Justify (Firefox)
text-justify:inter-ideograph (IE)

これは CSS ですただし、お勧めしません。

を使用して、良いトリックを教えてください親の署名署名:------------- --具体的にどのくらいのピクセルが必要かは実験できますが、わかりません。

最後の単語は必ずスパンの外側に配置してください。そうすることで、最後の単語が上の記号と確実に揃うようになります。さらに、これにより IE6 ではいくつかの問題が発生します: Parent SignDepartment: ----------具体的な間隔はご自身で調整してください。

CSS テキストの両端を揃えます
text-align:Justify(Firefox);
text-justify:inter-ideograph(IE)

これは CSS ですが、使用することはお勧めできません
これでも満足できません、単一のテキストの長さでは十分ではありません。文字間隔を広げるために、letter-spacing または word-spacing を追加する必要もありますが、この間隔値では 100% の位置合わせを達成することはできません

最後の単語を必ずスパンの外側に配置してください。最終 1 つの単語が上記の署名と一致します。さらに、これにより IE6 ではいくつかの問題が発生します: Parent SignDepartment: ----------具体的な間隔はご自身で調整してください。

私もこれを使用しましたが、完全に中国語ではないなど、多少不完全です。絶対的な左右の位置合わせを実現するより良い方法はありますか?

最後の単語が上の記号と確実に揃うように、最後の単語をスパンの外側に配置してください。さらに、これにより IE6 ではいくつかの問題が発生します: Parent SignDepartment: ----------具体的な間隔はご自身で調整してください。

私もこれを使用しましたが、完全に中国語ではないなど、多少不完全です。絶対的な左右揃えを実現するより良い方法はありますか?

いいえ

CSS を使用する方法はありません
私は常にスペースを使用します
全角スペースは漢字 1 文字に相当し、半角スペースは 1 文字に相当します。漢字の半分に相当します
全角のものを使用することをお勧めしますスペース

最後の単語が上の記号と確実に揃うように、最後の単語は必ずスパンの外側に配置してください。さらに、これにより IE6 ではいくつかの問題が発生します: Parent SignDepartment: ----------具体的な間隔はご自身で調整してください。

私もこれを使用しましたが、完全に中国語ではないなど、多少不完全です。絶対的な左右の位置合わせを達成するためのより良い方法はありますか

すべて中国語でないと少し辛いです。これを回避する方法は本当にありません。

メソッドを作成します
上の行と下の行を同じ長さの div に配置します。たとえば、div 幅は 100、div ID は div1、div2 で、メソッド setDq() を呼び出します

関数 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はどう書けばいいですか

rreee

よくわかりません、この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>

ログイン後にコピー

有个操蛋的办法

班

主

任

签

署

家

长签

署

td{text-align:center;}
p{letter-spacing:xxpx}这里的数值根据实际情况设置。
有点操蛋这个办法，班主任那边也用表格的原因是因为让td 的宽度比字稍微宽一点居中对齐之后会稍微好看点。还真是为达目的不择手段

其实都是欺骗人的眼睛的。美工设计一张图片运用了多种手法欺骗了你的眼睛，制作运用了很多方法目的还不是为了来欺骗人的眼睛。能达到效果我想就可以了。外行看热闹，内行看门道。而客户大多又是外行。之前的回答如果真的对你有效那就结贴吧。当让如果你还想等更加好的办法可以继续等下去。

多套几个A标签好多方法，一个一个定义...

基本属于自己找麻烦