ホームページ > 記事 > ウェブフロントエンド > 基本的な質問をする_html/css_WEB-ITnose
基本的な質問をする_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:25982ブラウズ
例えば、以下の内容を一行で表示したい場合はどうすればよいでしょうか？ (注: 1/2 は標準的な分数として上下 2 行で書く必要があります)
「...ここでは 30 文字省略してください...分数を入力したいのですが: 1+1/2, whatこれでいいでしょうか？...ここは10文字省略します...」
表を作りましょう。1行に数文字だけではもったいないし、レイアウトに影響します。もう少し絵を作りましょう。複雑。
注目してますか？
ディスカッションに返信 (解決策)
このアイデアを試すことができます
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .percent{ position: relative; } .percent span:nth-child(1){ border-bottom: 1px solid #000; position: absolute; top: -2px; } .percent span:nth-child(2){ position: absolute; top: 15px; } </style> </head> <body> <div class="percent"> <span>1</span> <span>2</span> </div> </body></html> ブランチ p タグを使用します
ありがとう 2# ですが、私の ie8 は使用できません。
#1 の nth-child に感謝します (ie8 は使用できません)
ブランチは p タグを使用しています
例を教えてください。ありがとうございます。
実際、これは table を使用することで簡単に解決できます。 tr と td set valign="middle" は 1 つだけです。分数に遭遇した場合は、td を追加して 0c6dc11e160d3b678d68754cc175188a を使用します。問題 :p、table などはすべてブロック要素であり、別の行を占有する必要があります。行要素と同じ行に置くことはできません (インラインであっても、同じ水平行には存在しません)。表示する式が非常に短い場合 (1+1/2 など)、それも 1 行を占有し、あまりにも見苦しくなります。同じクラスにならない問題！センタリングは 1 つずつデバッグする必要がありますが、明らかに機能しません...
jslang へ:
あるいは、問題は 1/2 と 1/100 が同じクラスを共有できないことです。中央に配置するには 1 つずつデバッグする必要があります。明らかに機能しません...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style type="text/css">#ft { position: relative; top: 0.5em;}#fb { position: absolute; top: -1em; text-decoration: underline;}</style></head><body><br /><br />fffff 1+<span id="ft"><span id="fb">1</span>2</span> nnnnnnnnn</html></body></html>
わかりました。ポイントを追加して投稿します。月末です。皆様、明けましておめでとうございます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。