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

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

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

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

HTML5

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

HTML

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

Q&A

解決済

2回答

1387閲覧

HTMLでリストの2つを同じ行に「左寄せ」「右寄せ」で表示させたいです

dog57

総合スコア131

CSS3

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

HTML5

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

HTML

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

0グッド

1クリップ

投稿2018/01/11 00:57

ただいま、こちらを作成しております。(下記画像)
HTMLでリストの2つを同じ行に「左寄せ」「右寄せ」で表示させたいです。

イメージ説明

上記の画像を下記の画像のようにしたいのです。
イメージ説明

どのように横並びに揃えたらよろしいでしょうか?
よろしくお願いいたします。

・index.html

html

1 2 <!-- SOLTのメンバー --> 3 <div class="members"> 4 <div class="member"> 5 6 <h2>会社名のメンバー</h2> 7 8 <ul class="solt-members"> 9 <li>名前</li> 10 <li>名前</li> 11 <li>名前</li> 12 <li>名前</li> 13 </ul> 14 15 </div> 16 17 <!-- 採用の流れ --> 18 <div class="recruit"> 19 20 <h2>採用選考の流れ</h2> 21 22 <ol> 23 <li>フォームから応募する</li> 24 <li>書類選考</li> 25 <li>面接</li> 26 <li>合否連絡</li> 27 </ol> 28 29 </div> 30 </div>

style.css

css

1body { 2 font-family: sans-serif; 3} 4 5.list { 6 background-color: #c93a40; 7 padding: 20px 0; 8 text-align: center; 9} 10 11.list-item { 12 display: inline; 13 color: white; 14 padding: 0 60px; 15} 16 17.top-img { 18 margin-top: 50px; 19} 20 21.image { 22 width: 100%; 23} 24 25.top-message { 26 border-bottom: 2px solid #999999; 27} 28 29.message-content { 30 margin-left: 15px; 31} 32 33.message-contents { 34 margin-left: 15px; 35} 36 37.member { 38 background-color: #c93a40; 39 padding: 10px 25px; 40} 41 42.recruit { 43 background-color: #c93a40; 44 padding: 10px 25px; 45} 46 47.members { 48 float: left; 49 50}

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

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

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

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

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

kei344

2018/01/11 02:38

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

.membersをfloatしてもダメです。floatするのは横並びにしたい要素(.memberと.recruit)です。
ただし.members内でclearしないといけません。
また親ブロック(.members)の高さや幅が維持できなくなります。

css

1.members { 2 float:none; 3} 4.member,.recruit { 5 float:left; 6 /*こっちでも可 7 display:inline-block;*/ 8}

投稿2018/01/11 01:15

sousuke

総合スコア3828

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

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

dog57

2018/01/11 01:40

解決できました! ありがとうございます。
guest

0

memberのfloat:leftでできないでしょうか?

投稿2018/01/11 01:16

koizumi

総合スコア230

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問