- 締切済み
【css】異なる種類の要素を横並びに表示する方法
たとえば見出し要素<h1>とリスト要素<ul>を横並びに表示したい場合、cssでは何をどれに対して指定すれば良いのか教えていただけませんか。 よろしくお願いします。
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ngwaver
- ベストアンサー率26% (323/1202)
h1{ display:inline; } ul{ display:inline; } li{ display:inline; }
関連するQ&A
- css 横並びのナビゲーションバーを二段にする場合
CSSでデザインしてるのですが・・・。 ナビゲーションバーで横並びに４項目。 ここまでは出来るのですが、この４項目を ２段にして、８項目にするには、どのように書くのがスマートでしょうか。 テーブルにしたほうが早そうな気もしますが、 表かといいうと、違う気もします。 ulでリスト表示の途中で改行させる方法があるのか、 マークアップが適切とはいえないけれど、 リストが二つあることにして、ulを二つにするか、 などと考えています。 初心者でよくわかっていないのですが、 皆様はどのようにしたら良いと思われますか？ よろしくお願いします。
- ベストアンサー
- HTML
- 要素のない文字をCSSでレイアウトを整える方法
例えば、 <h1>見出し1</h1> 私は、～～～～～～～～～～～～。 というような文章があったとして、文字と文字の間の隙間や上下の段落の幅のレイアウトを決めたいとき、「私は、～」については特に要素がないのでCSSでレイアウトを指定するとき<body>を指定するしかないのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- HTML&CSSで「横並び」にする方法
最近、独学でプログラミングを学び始めた初心者です。 知識が浅く、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。 詳しい方がいたら教えてください。 ・HTMLでは <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> ・CSSでは、 #nav li { display: inline; list-style-type: none; padding-right: 30px; } と書いたのですが「横並び」になりません。何が間違っているのでしょうか？ これだけの情報だと回答が難しいかもしれませんが、非常に困っております。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSでflotさせた要素を親要素で幅いっぱいに表示したい
以下のHTMLソースで、リストをfloatで横並びにし、 親のdivに対して3列ずつで左右余白なく幅いっぱいに 表示させたいと考えております。 <div> <ul> <li><img></li> <!-- 複数リストを繰り返し --> <li><img></li> </ul> </div> 例えば以下のようなCSSを書いた場合、 div {width:500px;} li {float:left; width:150px; margin-left:10px;} 左端はそろいますが、右端に余白が出来てしまいますよね。 各リストに対して左端用クラス、右端用クラスみたいなものを 指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず 実現したいと考えております。 IE6~7・safariでとりあえず表示させたいです。 どなたか知識のある方、ご教授の程よろしくお願いいたします。
- ベストアンサー
- HTML
- float:leftで<li>要素を横並びさせてから、中央揃えする方法は？
ＨＴＭＬ <dir id="footer"> <ul> <li>個人情報保護方針</li> <li>サイトマップ</li> <li>組織概要</li> <li>お問い合わせ</li> </ul> </dir> ＣＳＳ #footer ul li{float: left;} 上記の場合、li要素は横並びするのですが、 <div>要素の中で中央揃えするには どうしたらいいのでしょうか？
- ベストアンサー
- HTML
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSSでリストを横並びにし、行頭画像を表示させたい
XHTMLとCSSでのWebページを作成しています。 リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。 おかしい部分や足りない部分がありましたら、ご指摘お願い致します。 ≪CSS≫ #menu li{ display:inline; list-style-image:url(画像のパス); } #menu li a:hover{ list-style-image:url(画像のパス); } ≪ｈｔｍｌ≫ <div id="menu" name="menu"> <ul> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> </ul> </div> 試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。 何卒、宜しくお願い致します。
- ベストアンサー
- CSS
- 「横並び」にする方法→HTML&CSS
HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { display:inline; list-style-type: none; padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？ 非常に困っております。 回答よろしくお願いします。
- ベストアンサー
- HTML
- cssで写真と説明文の表示方法？
初心者です。こんな時のcssの記述方法を教えて下さい。（添付データ参照） 一つのボックス内にp要素ばかりがあるのですがこんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか? それとも、p要素に一つずつクラス設定をした方が良いのでしょうか？ 全体をdiv class="goodsBoix"でくくり、タイトルは見出し<h2>で設定しました。 次に商品写真<p>にid=mainImgをつけて左にフロートしました。 右側の説明文の高さを固定して（説明文が長いのや短いのがあるので）、横並びになったイラストと金額を説明文の下側に並べたいのですがどうしたらよいのでしょうか？
- ベストアンサー
- HTML
- CSSでリスト横並び…そしてそれを中央へ
CSSでリスト横並び…最近知った物ですが、問題が絶えません…。以下のようにして、CSSでリストを横並びにしたのは良いのですが、それを中央表示させたいため、ネットで色々と調べ、それを真似ているのですが、うまく中央へ表示されません。一体何が悪いのでしょうか？ 最初は ul も利用していましたが、あるサイトのソースだと ul を利用していなかったので省いたところ、変化なかったので、省いたままにしています。 +++ CSS ソース +++ #smenu { clear: both; margin: 0 auto; padding: 20px 0; width: 900px; height: 50px; white-space: nowrap; list-style-type: none; text-align: center; } #smenu li { float: left; margin: 0 auto; padding: 2px 10px; text-align: center; } #smenu a { display: block; text-align: center; } +++ HTML ソース ++++ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div id=smenu> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> </div> よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。
補足
ご提示の方法でうまくゆかず別の方法で解決したはずなのですが、その件に関してすぐに調べられる状況にないため、ひとまず補足上報告と締切にて対応させていただきます。