• ベストアンサー

文字の位置指定をしたい

例えば <a href"">文字</a> <a href"">文字</a> <a href"">文字</a> この場合は、left、center、right、で均等な間隔で 文字            文字              文字と表示されるのですが、 文字      文字        文字         文字 このように4個のリンク先を均等な間隔で表示させることは無理でしょうか?質問の意味が不明でしたらすいません。可能でしたら、ご教授お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • suiris
  • ベストアンサー率68% (17/25)
回答No.1

>このように4個のリンク先を均等な間隔で表示させることは無理でしょうか? ■幅を全て統一するということなら様々な方法がありますが、CSS(スタイルシート)を利用して作成するのが望ましいです。 例)sample.html(HTML) <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <ul id="navi"> <li><a href="a.html">文字</a></li> <li><a href="a.html">文字</a></li> <li><a href="a.html">文字</a></li> <li><a href="a.html">文字</a></li> </ul> </body> </html> 例)sample.css(スタイルシート) 1.スタイルシートのファイルを作ります(HTMLと同じ感覚で拡張子を.cssにして保存)この場合、style.cssを作成します。 そして以下のソースを打ち込むだけ。 #navi{ width:100%; margin:0px; padding:0px; } #navi li{ float:left; display:block; width:24.9%; text-align:center; }

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 文字の位置を指定する方法

    <A HREF"">文字</A> <A HREF"">文字</A> <A HREF"">文字</A> これを横一列に「文字」「文字」を均等な間隔で表示したいのですが、LEFTやCENTERやRIGHTを使うと両端に寄り過ぎてしまいます。 |←→文字←→文字←→文字←→| このように←→の間を一定の間隔で画面上に表示させる方法を外部CSSに記述する、というやりかたで知りたいです。 質問の意味が不明でしたら申し訳ございません。可能な限りで知っている方がおりましたら、ご教授をお願いします。

    • ベストアンサー
    • HTML
  • 画像の位置指定

    <img src="画像.png" /> <img src="画像.png" /> これを均等な間隔で |←→画像←→画像←→| このように表示させるやり方を、教えて頂きたいです。 質問の意味が不明でしたら、すいません。 ご教授を宜しくお願いします。

  • 文字の回りこみについて

    7タグという、ホームページ作成参考ページをみながら作り始めています。かずかずあった問題も、これまで自分で解決してこれたのですが、文字の回りこみについて、質問があります。 <IMG SRC="画像名.jpg" align="left">   <A HREF="profile.html">自己紹介</A> <br> <A HREF="link.html">日記</A> <br> <A HREF="link.html">掲示板</A> <br> <A HREF="link.html">リンク</A> と、align="left"という属性を入力すると「自己紹介」という文字が画像の右に表示されず、下に回りこみます、という説明があったのですが、どうやっても無理です。 ふと、ひらめいて、画像の下にスペース<br>を入れてみたら、自己紹介以下の文字列は下にゆくようになりましたが、こんな解決でいいのかなぁと思います。この場合、align="left"も必要ありませんでした。

    • ベストアンサー
    • HTML
  • リストに指定したマークの位置がずれてしまいます

    特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>

    • ベストアンサー
    • HTML
  • 文字の位置を変えるタグ

    <center><left><light> などで文字の位置を変えられるタグは知っているのですが、 中途半端な位置に文字を配置したいんです。 ↑のタグ以外で、文字の位置を変えるタグがあれば、教えていただけないでしょうか??

  • 文字の両側に画像を配置するCSSのやり方

    ●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか?

    • ベストアンサー
    • CSS
  • 画像の位置

    お世話になります。 ホームページ上に画像を載せるとき、左にちょっと間隔を開けて載せたいのですが、どうすればいいでしょうか。 align=""がleft,center,rightしか分かりません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • タグ 位置指定

    HPの位置指定タグについてです(・_;)   文字や画像いろいろなものを位置指定できるタグを探しています。 それも、<center><left><right>などといった 単純な位置指定ではなく、 数字で細かく指定できるタグです(@_@;) 私の力では 探しきれませんでした…;;; どなたか 知っている方がいましたら 教えてください(>_<) お願いします。

  • ulインラインブロックの文字数オーバーの非表示

    <html> <body> <head> <style> li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } </style> </head> <ul> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンクグーグルへリンクグーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> </ul> </body> </html> ULブロック要素をスタイルシートでインラインブロック要素にして、 横に並べたて表示しているのですが、表のように表示した時に、 そのliの一つ一つのブロックから文字がはみ出すことがあります。 overflow:hidden;を設定しても文字数の数だけ、liブロックを拡大して表示されてしまうのですが、 どのように表記すれば、うまくいくでしょうか?よろしくお願いします。

    • 締切済み
    • CSS
  • リンク指定について

    常識だったらすいません <a href\"***.wav +++.mp3\">キーワード</a> このように、1つのリンクに複数のリンク先を指定することは無理でしょうか?

    • ベストアンサー
    • HTML