リンクを横に並べる方法とCSSの記述

このQ&Aのポイント
  • リンクを横に並べる方法としてCSSでdisplay: inline;を指定し、リンクをdiv要素で囲み、中央揃えや右揃えをするためにtext-alignプロパティを使用します。
  • 質問文章では、リンクを横に並べるにはdisplay: inline;を指定することで実現できます。また、中央揃えや右揃えをするにはtext-alignプロパティを使用します。
  • CSSを使用してリンクを横に並べるには、リンクをdiv要素で囲み、display: inline;を指定します。また、中央揃えや右揃えをするにはtext-alignプロパティを使用します。
回答を見る
  • ベストアンサー

リンクを横に並べるには、どうすればいいですか?

リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか?    リンク1(中央揃え)   リンク2(右揃え) なぜか、下記のようになってしまいます。 リンク1(中央揃えにしたいのに、左揃え状態)                                リンク2(右揃えになっているけど、改行されてしまう) margineかpaddingで設定するしかないでしょうか? 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分(外部スタイルシートに記述) ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="~○○">リンク1</a></div> <div id="right"><a href="~○○">リンク2</a></div> </div>

noname#228688
noname#228688
  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • szk9998
  • ベストアンサー率45% (1024/2232)
回答No.1

結論から言うと、 /*---------- CSS部分(外部スタイルシートに記述) ----------*/ div#inline { position: relative; } div#center { text-align: center; } div#right { position:absolute; top:0px; right:0px; } で表示できませんか? 手元でIE(Ver9)とFireFox(Ver10)で表示できてます。 ・display: inline;は不要。 ・divは行単位のタグなので、普通に使えば確実に改行です。 ・divにtext-align: right:は適用できない  (ブラウザのバージョンは? 古くないですか) ということで、上記のとおりとなります。 positionタグは調べてくださいね。

noname#228688
質問者

お礼

回答ありがとうございます。 できました。positionタグ、勉強します。 本当にありがとうございました。

関連するQ&A

  • テキストの揃え方について

    CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

    • ベストアンサー
    • CSS
  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS
  • vertical-align:middleをFirefoxで実現させたい

    ナビゲーションをhtmlで以下のように記述しています。 <div id="navi"> <ul> <li><a href="index.html"><img src="images/rogo_s.gif" /></a></li> <li><a href="information.html">Information</a></li> <li><a href="history.html">History</a></li> <li><a href="invitation.html">Invitation</a></li> <li><a href="members.html">For members</a></li> </ul> </div> cssは以下のとおりです。 上記のナビゲーションを横並びにしています。 #navi li{ display:inline; list-style-type:none; margin:15px; vertical-align:middle; } liの先頭にはロゴ画像を配置しています。 ロゴは、テキストで記述したメニューよりも高さがあるので、横並びにしたときに、下揃えになってしまいます(vertical-align:bottomのイメージ)。 そこで上記のように、cssに「vertical-align:middle」を加えたところIE7では思い通りになりましたが、Firefoxでは下揃えのままになってしまいます。 Firefoxでも真ん中揃えにする方法はないでしょうか?

    • ベストアンサー
    • HTML
  • 全体のレイアウト:中央揃えについて

    画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7  body { text-align: center }で、中央揃え  div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか? 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • divのクラス内のリンクの設定

     CSSの設定でわからない点がありましたので質問させてください。  div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか?  これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • text-align centerの違い

    div内にリンクを書くとセンターを基準に表示されるのですが div内にulとliでメニューを組むとセンターを基準に表示されず 左を基準に表示されてしまうのですがどのようにすれば いいものでしょうか? ---CSS--- #hoge { width: 1000px; text-align: center; background: #fff; } ---HTML--- ↓この場合センター表示されます。 <div id="hoge"> <a href="#">hoge</a> </div> ↓この場合センター表示されず左を基準に表示されます。 <div id="hoge"> <ul> <li><a href="#">hoge</a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • スタイルシートの外部リンク方法は間違っていますか?

    外部CSSファイルからHTMLファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをHTMLに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか? ブラウザで見ると文字化けの羅列です CSSをHTMLに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します

  • CSSセクレター 子孫のみに適用する方法

    子孫の要素のみに、CSSを適用する方法を教えてください。 下記は適用方法が分からないため、<a>に適用させていますが、 理想としては<a>の中の<div>要素に適用させたいのです。 ※(最後のbox1margin:rgiht:0px;になりそれ意外のブロックが全てmargin:rgiht:10px;になる) よろしくお願いします! <!--HTMLの記述--> <div class="box-wrapper"> <a href=""><div class="box1">ブロック1</div></a> <a href=""><div class="box1">ブロック2</div></a> <a href=""><div class="box1">ブロック3</div></a> </div> /*CSS側の記述*/ .box1{ width:100px; height:20px; background:#C6F; text-align:center; display:inline-block; } .box-wrapper > a{ margin:0 10px 0 0; } .box-wrapper > a:last-child{ margin:0; }

  • CSSのDIV要素

    CSSのDIV要素を使ってボックスを作ったんですが、 外部スタイルシートに書き込んで、下記のようにする方法はありませんか? <center> <DIV align="left"> </DIV> </center> ボックス本体を画面の中央に持っていき、内容は左揃えにしたいのです。 どなたか知っている方がいましたら、教えてください。

    • ベストアンサー
    • HTML
  • CSS、width100%でもできる余白

    CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか? また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}

    • ベストアンサー
    • CSS

専門家に質問してみよう