Q&A
プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
前提・実現したいこと
webサイト制作してるのですが、検索バーと、新着順用ボタンと、人気順用ボタンの横並びをしたいと思っています。
発生している問題・エラーメッセージ
横並びになりません
エラーメッセージ
### 該当のソースコード ```html <div class="button1"> <div class="kensaku"> <form id="searchbar" form action="ruby-url"> <input id="kagemoji" input type="search" placeholder="キーワードを入力"> <input id="submitbar" input type="submit" value="検索"> </form> </div> <div class="shintyaku"> <input type="button" value="新着順" onclick="new()"> </div> <div class="ninkijun"> <input type="button" value="人気順" onclick="ninki()" > </div> </div>
css
1.button1{display: inline-block; 2}
宜しくお願いします
また、htmlの構造がおかしいです。<html>の直後にdivがきていたり。参考にしたサイトなどもあればご提示ください。
<div class="button1"> type="button" value="人気順" ←何か入ってますが大丈夫ですか？
ご回答ありがとうございます。囲いました。 html と css それぞれ途中のみ抜粋しています。紛らわしく申し訳ありません。 何か入ってるというのはどこの部分でしょうか？
エラーメッセージ と ```の2行（### 該当のソースコードの前の行）は削除してください
mts10806さんがご指摘のものは、「何か余計な文字コード」が入っているように思います。エディタによっては空白に見えるかもしれません。
囲えていません。プレビュー見ながら編集してくださいね。 コメントにも割と明確に書いてますが・・・ ←これ。何でしょう？関係ないものであったり文字化けのような文字が入っていると正しく動作しない原因になりかねません。
ブラウザ次第で見えないのかな・・？
←私のエディターでは[BS]と表示されています。エディターに寄るのかもですね。
回答2件
0
ベストアンサー
.button1 の子要素を全て1列に横並びにします。
CSS
1.button1 { 2 display: -webkit-flex; 3 display: flex; 4}
↓の = と " の間に何かあるので消してください。
HTML
1<div class="button1">
投稿2018/04/18 05:44
総合スコア355
0
.button1直下のdivを横に並べたいなら
css
1.button1 > div{ 2 display: inline-block; 3}
かな？
今後の作り方次第で破綻するかもしれないので注意してください。
投稿2018/04/18 05:41
総合スコア3235
あなたの回答
tips
プレビュー
