【css】異なるオブジェクトの縦並びについて

Question

xcodeでの開発が終わり、次はjavaに初めて触れ、サイトを作ることになったのですが、基礎のきという字すらない状態での作業で今四苦八苦しております。

###前提・実現したいこと
大きめの画面の中に小さい画面を出し、その小さい画面の中に
検索ワード入力と検索ボタン（どちらも仮状態です）を
縦に並べたいです。

###発生している問題・エラーメッセージ
並べ方はこちらのサイトを、ボタンはこちらを参考に縦並びをしようとするのですが、同じオブジェクトタイプのためか、違うオブジェクトでやろうとするとどうしてもずれないです。

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

@charset "UTF-8";

.clear{display:none;}

#bookList-box{
	width:33%;
	height:650px;
    background-color: #E3F0FB;
}



.bookList-searchbox {
    ime-mode: auto;
    margin-top:10px;
}


.bookList-button {
  border: 1px solid #15AEEC;
  background-color: #49C0F0;
  background-image: -webkit-linear-gradient(top, #49C0F0, #2CAFE3);
  background-image: linear-gradient(to bottom, #49C0F0, #2CAFE3);
  border-radius: 4px;
  color: #FFF;
  line-height: 50px;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.bookList-button:hover {
  border:1px solid #1090C3;
  background-color: #1AB0EC;
  background-image: -webkit-linear-gradient(top, #1AB0EC, #1A92C2);
  background-image: linear-gradient(to bottom, #1AB0EC, #1A92C2);
}
.bookList-button:active {
  background: #1A92C2;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
  color: #1679A1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

<div id = "bookList-box">
	    <input type="text" class="bookList-searchbox" size="30" name = "name">

		<input type="button" class = "bookList-button" name = "button">
</div>
<div class = "clear"></div>

###補足情報(言語/FW/ツール等のバージョンなど)
javaEE,Eclipseにて作成してます

宜しくお願い致します。

Answer 1

並べ方を参考にしているサイトを確認しましたが、divタグを付け忘れています。
textとbuttonのinputに対して、divタグを追加することで可能です。

        <div><input type="text" class="bookList-searchbox" size="30" name = "name"></div>

        <div><input type="button" class = "bookList-button" name = "button"></div>

divタグは自身に意味を持っていませんが、ブロック要素である為、縦並びになります。

CSSで対応する場合は、親のdivであるwidth(横幅)の指定を狭めるか、display属性を追加する等で可能です。

---

// 横幅を狭める場合

#bookList-box {
    width: **29%**;
    height: 650px;
    background-color: #E3F0FB;
}

---

// display属性を追加する場合

.bookList-searchbox {
    display:block;
    ime-mode: auto;
    margin-top: 10px;
}

Comments

[RagnAnet1373]

無事縦に並びました！
しかしその部分を見落としていたのですね・・・。

しっかりドキュメントとスクリプトをみて、見落としがないようにしていきたいです・・・。
回答ありがとうございました！