ホームページ > 記事 > ウェブフロントエンド > CSS テキストを両端揃え_html/css_WEB-ITnose

CSS テキストを両端揃え_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-21 09:43:431625ブラウズ

CSS

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

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

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

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

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

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

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

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

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

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

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

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

いいえ

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

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

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

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

メソッドを作成します
上の行と下の行を同じ長さの 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会有点问题，可以这样改：f9bc209cf6342d69eb67ba2cbbd548c6家长签54bdf357c58b8a65c66d7c19c8e4d1148c32387b595d5e7962502ee8b968d9a4署54bdf357c58b8a65c66d7c19c8e4d114： ----------自己调下具体的间距多少合适。

这个我也使用了，但多少有点不完美，譬如说不全是中文。有没有更好的方法能做到绝对左右对齐

不全是中文的就有点蛋疼了。这个还真没好办法。

+1

有个操蛋的办法
983ea45afdeddf1e11d07a4900914a0d
  b4586402b64214c7a5aa850a0dc9e909
    a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c班b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c主b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c任b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c签b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c署b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
  f16b1740fad44fb09bfe928bcc527e08
  b4586402b64214c7a5aa850a0dc9e909
    a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c家b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1ce388a4556c0f65e1904146cc1a846bee长签94b3e26ee717c64999d7867364b1b4a3b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c署b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
  f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
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>

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

基本属于自己找麻烦

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html_html/css_WEB-ITnose に画像を挿入できないのはなぜですか次の記事：html_html/css_WEB-ITnose に画像を挿入できないのはなぜですか

続きを見る

CSS テキストを両端揃え_html/css_WEB-ITnose

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

関連記事