質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1624閲覧

リストの一部だけが上がってしまいます.....

zeben

総合スコア67

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/03/03 07:39

編集2016/03/03 08:29

html

1 2 <div id="dream-pool"> 3 <ul> 4 <li> 5 <div class="dream-box"> 6 <div class="dream-pic"> 7 <img class="dreams" src="<%= asset_path "assets/ultraman.png" %>"> 8 </div> 9 10 <div class="dream-note"> 11 <img class="note" src="<%= asset_path "assets/ultranote.png" %>"> 12 </div> 13 14 <p>これはテストです。。。。。。。。。。。。。。。。。。。。。。。</p> 15 </div> 16 </li> 17 <li> 18 <div class="dream-box"> 19 <div class="dream-pic"> 20 <img class="dreams" src="<%= asset_path "assets/designer.png" %>"> 21 </div> 22 23 <div class="dream-note"> 24 <img class="note" src="<%= asset_path "assets/designnote.png" %>"> 25 </div> 26 27 28 <p>これはテストです。</p> 29 </div> 30 </li> 31 <li> 32 <div class="dream-box"> 33 <div class="dream-pic"> 34 <img class="dreams" src="<%= asset_path "assets/gamecreater.png" %>"> 35 </div> 36 37 <div class="dream-note"> 38 <img class="note" src="<%= asset_path "assets/gamenote.png" %>"> 39 </div> 40 41 <p></p> 42 </div> 43 </li> 44 <li> 45 <div class="dream-box"> 46 <div class="dream-pic"> 47 <img class="dreams" src="<%= asset_path "assets/patticie.png" %>"> 48 </div> 49 50 <div class="dream-note"> 51 <img class="note" src="<%= asset_path "assets/patticienote.png" %>"> 52 </div> 53 54 55 <p></p> 56 </div> 57 </li> 58 <li> 59 <div class="dream-box"> 60 <div class="dream-pic"> 61 <img class="dreams" src="<%= asset_path "assets/musician.png" %>"> 62 </div> 63 64 <div class="dream-note"> 65 <img class="note" src="<%= asset_path "assets/musiciannote.png" %>"> 66 </div> 67 68 <p></p> 69 </div> 70 </li> 71 <li> 72 <div class="dream-box"> 73 <div class="dream-pic"> 74 <img class="dreams" src="<%= asset_path "assets/hatena.png" %>"> 75 </div> 76 77 <div class="dream-note"> 78 <img class="note" src="<%= asset_path "assets/hatenanote.png" %>"> 79 </div> 80 81 <p></p> 82 </div> 83 </li> 84 </ul> 85 86 </div>

css

1 2#dream-pool{ 3 height:550px; 4 margin: 25px auto; 5 width:700px; 6 box-sizing: border-box; 7} 8 9 10 11 12 13#dream-pool ul li{ 14 display: inline-block; 15} 16 17#dream-pool ul{ 18 margin: 0 auto; 19 padding: 0px; 20} 21 22.dream-box{ 23 background-color: #FFD700; 24 height:271px; 25 margin-top: 5px; 26 width:229px; 27} 28 29/*ライトバーを独立させている*/ 30 31.bar:after{ 32 content: ""; 33 clear: both; 34 35 36} 37 38.dreams{ 39 height: 104px; 40 margin-top: 5px; 41 width:200px; 42 43} 44.dream-pic{ 45 text-align: center; 46} 47.dream-note{ 48 margin-top: -31px; 49 text-align: center; 50} 51.note{ 52 height: 100px; 53 width: 150px; 54 55} 56.dream-box p{ 57 font-size: 14px; 58}

イメージ説明

画像のような状態です!

liで横並びに表示させているのですが、その中のp要素に文字をいれるとその行の高さの文だけliの部分が一部分だけあがってしまいます。

初心者でなかなかよくわからないのですが
教えていただける嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sonor_3rd

2016/03/03 08:14

画像が差し込まれているようですね。 もし可能なら、画面キャプチャを貼付して頂けると助かります。
zeben

2016/03/03 08:18

修正致しました!宜しくお願い致します!
guest

回答2

0

CSS

1#dream-pool ul li{ 2 display: inline-block; 3} 45#dream-pool ul li{ 6 display: inline-block; 7 vertical-align: top; 8}

ではいかがでしょうか。

投稿2016/03/03 08:57

編集2016/03/03 08:58
AbeYellow

総合スコア33

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zeben

2016/03/04 01:40

ありがとうございます!!
guest

0

ベストアンサー

#dream-pool ul li{
display: inline-block;
}

#dream-pool ul li{
display: inline-flex;
}

今風に書くならこんな感じでしょうか。。
もしこちらを使用しない場合は、「高さ揃え」をする必要があります。
その場合、js開発またはプラグインが必要となりますね!

投稿2016/03/03 08:31

takumaro_web

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takumaro_web

2016/03/03 09:05

良いと思います! ただ、高さ固定のようなのでいらないかもですね (ただテキスト量が増えると厳しいですが...)
zeben

2016/03/04 01:40

ありがとうございました!BAにさせていただきました! takumaro_webさんもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問