- ベストアンサー
罫線の横にテキストを表示
携帯用コンテンツページで、 罫線の横にテキストを表示したいのですが うまくいきません。 ご教示いただけますでしょうか。。 イメージは下記です。 -----------□ XXXXXX XXXXXX XXXXXX -----------□ よろしくお願いいたします。
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 罫線は<hr>タグを使用されておりますか？<hr>タグはその前後に改行を挿入しますので、罫線の左右にテキストを表示する事ができません。少々強引ですが、<table>タグを使用した方法のひとつを記述します。 <html> <body> <table><tr><td aligh="left"> <hr align="left" width="60"> </td> <td>□</td></tr> </table> ｘｘｘｘｘ<br> ｘｘｘｘｘ<br> ｘｘｘｘｘ<br> <table><tr><td aligh="left"> <hr align="left" width="60"> </td> <td>□</td></tr> </table> </body> </html>
その他の回答 (3)
- Questa
- ベストアンサー率48% (13/27)
HRをDIVボックスで囲み、後続要素にネガティブマージンを指定する方法です。 ブラウザごとに中心線が微妙にズレますが、参考にしてください。 (CSS) .hr-box { width: 100px; } .side-text { margin-top: -1em; margin-left: 110px; } p { margin: 0; } (HTML) <div class="hr-box"><hr></div><p class="side-text">□</p> <p>XXXXXX</p> <p>XXXXXX</p> <p>XXXXXX</p> <div class="hr-box"><hr></div><p class="side-text">□</p>
お礼
ありがとうございます。 スタイルシートは設定した事がないので記述の仕方から勉強が必要な感じです。 コピペして、修正しアップしてみましたがダメでした。
- cyokokichi
- ベストアンサー率21% (32/152)
罫線を画像にするとできます。 hrではムリでしょう。 i-modeXHTMLやi-modeHTML6.0、ボーダフォン向けHTML、XHTMLbasicなら他の方の回答のようにやれば良いでしょう。 ただ、画像も共通で使えませんけどね。
お礼
ありがとうございます。 i-modeHTMLですが、すべての機種で表示させたいのです。 やはり、hrでは無理なのですね。 あきらめがつきました。
補足
アップして確認しましたが、思ったように表示されませんでした。ご教示ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
これでどうでしょう？ <span style="float:left;"><hr width=100></span>□<br> XXXXXX<br> XXXXXX<br> XXXXXX<br> <br> <span style="float:left;"><hr width=100></span>□<br>
お礼
お返事ありがとうございます。 span タグ…。使ったことない初心者です。(T_T) 検証してみます。
補足
アップして確認しましたが、思ったように表示されませんでした。ご教示ありがとうございました。
お礼
ありがとうございます。i-modeHTMLなのですが、 <table>タグは使えないと思っていました。 検証してみます。
補足
アップして、携帯で確認しましたら、うまく表示されませんでした。もう少し勉強します。 ご教示ありがとうございました。