0

Bootstrap を使用して検索フォームを作成しようとしています。HTMLは次のとおりです。

<form class="form-search search-bar">
  <div class="input-append">
    <input type="text" class="search-query" placeholder="Enter your address here...">
    <button type="submit" class="btn btn-primary">
    Search <i class="icon-search icon-white"></i></button>
  </div>
</form>

CSS は初めてです。検索要素がブロック全体で水平方向に中央揃えになるようにスタイルを設定するにはどうすればよいですか? また、検索要素の高さを増やすにはどうすればよいですか?

4

2 に答える 2

1

IDを追加する必要があります

.search-bar {
    text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
    display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
    height: 30px;
}
.search-bar .btn-primary {
    height: 40px;
}
于 2012-12-12T08:56:10.560 に答える
0

それらを隣り合わせに配置するには、 float コマンドを使用できます

.search-query {
  float:left;
}
.btn-primary {
  float:left;
}

の幅が、input-appendそれらを隣り合わせに配置するのに十分な大きさであることを確認してください。

そこを増やすには、heightheight:[amount]; を配置するだけです。floatCSSと同じブロックで

于 2012-12-12T08:52:45.627 に答える