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

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つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

5033閲覧

display:inline-block;を使って横並びにした要素をウィンドウサイズを変えた時に可変し、そのまま横並びで表示されるようにしたい。

kotamam

総合スコア7

CSS3

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

HTML5

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

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

2グッド

0クリップ

投稿2016/08/16 00:34

編集2016/08/16 04:20

###前提・実現したいこと
inline-blockを使用し、メニューをメイン画像の上に横並びに配置しました。ウィンドウサイズを変えた時に可変し、そのまま横並びで表示されるようにしたいのですができないのでしょうか?

###発生している問題
ウィンドウサイズをかえると自動で折り返される

###該当のソースコード html
``` <div id="headermenu">
<img class="logo" src="logo.png">
<ul>
<li>HOME<br>ホーム</li><li>
NEW ITEM<br>新商品</li><li>
CATEGORY<br>カテゴリー</li><li>
TOPICS<br>トピックス</li><li>
GUID<br>ガイド</li><li>
<input type="search" name="search"value="検索"></li><li>
<a href="">カート</a></li>
</ul>
</div> <!--headermanu -->

###該当のソースコード css

#headermenu{
height: 65px;
text-align: center;
overflow:hidden;
}

#headermenu > img{
float: left;
width: auto;
white-space:nowrap;
}

#headermenu > ul > li{
display: inline-block;
padding: 10px 2%;
display: inline\9;/* IE10以下 */
display: inline;/ IE7以下 /
_display: inline;/
IE6 */

#headermenu>ul>li> input{
width: 250px;
}
#headermenu>ul>li>a{
padding: 15px;
background-color: #fff;
}

###試したこと cssで自動に改行させないようにする方法を調べたのですがすべてが中央に寄ってしまったりするだけでうまくいきません。 どなたかお力を貸してください!
ikuwow👍を押しています

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

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

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

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

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

kei344

2016/08/16 04:12

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kotamam

2016/08/16 04:22

情報ありがとうございます! 教えていただいたのでできました!
kei344

2016/08/16 04:22 編集

編集ありがとうございます。(失礼しました)
kei344

2016/08/16 04:23

対応ありがとうございました。見やすくなりました。
kotamam

2016/08/16 04:25

こちらこそご指摘ありがとうございました。
guest

回答2

0

ベストアンサー

IEハック用のdisplay: inline; の記述が影響してますね。

display: inline\9;/* IE10以下 */
display: inline;/ IE7以下 /
_display: inline;/
IE6 */

にて試されてみては

追記です。
headermenu{height: 65px;
で指定してしまうと、ブラウザを可変にしたときに折り返しが表示されませんので、
上記をなくすか、 overflow: hidden; を無くすかしたほうがよろしいかと。

投稿2016/08/16 01:30

編集2016/08/16 01:36
aoimutsumi

総合スコア30

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

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

kotamam

2016/08/16 01:34

回答ありがとうございます! 教えていただいた記述で試したところ、中央に寄る事はなくなりました。 ですが、ウィンドウサイズをかえると折り返され、横並びのままの表示にはなりませんでした。
kotamam

2016/08/16 01:41

height をなくすと今まで折り返されてtopimageの中に隠れていたのが、折り返されてもすべて表示できるようになりました。 overflow:hidden;をなくしても同じでした。 ただ、やはり折り返しになってしまいます。
aoimutsumi

2016/08/16 01:48

ブラウザを小さくしたときは検索、カートの表示は見えなくなってもOKであれば、先ほどの追記は無視してください。 ブラウザを小さくしてもメニュー全体が縮小するように見せたいのであれば、レスポンシブ記述を使用するほうが良いかと。
kotamam

2016/08/16 01:59

768px以内はそのまま横並びの表記になりましたので、それ以下はレスポンシブ記述にてメニューボックスを作る事にしました。 何度もなんどもありがとうございました。
guest

0

headermenu > img{ float: left;right }

となっていますが、ここ直してありますか?
それから、inline-blockの場合に、ソースコード上でliのあとに改行などが入るとそのノード分のスペースが空いてしまい、サイズをきちんと指定していても幅が足りなくなって折り返されることがあります。
スペースなどが入っていないかもチェックしてください。

↓こういう感じでli要素の終了タグと次の要素の開始タグをくっつけてみてください。

<li>HOME<br>ホーム</li><li> NEW&nbsp;ITEM<br>新商品</li><li> ・・・

CSSがきちんと書かれていてもここでつまずく人も多いので先にこれを確認してみてください。
それでもダメならスタイリングを見直しましょう。

投稿2016/08/16 00:52

NatsumiOki

総合スコア1298

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

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

kotamam

2016/08/16 01:03

試してみましたが、うまくいきませんでした。 ウィンドウサイズを変えた時に可変し、そのまま横並びで表示されるようにしたいのですができないのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問