0

TwitterBootstrapフレームワークを使用しているWordPressWebサイトがあります。これがウェブサイトです：http ：//www.vickieats.com/

サンプルページ（ http://twitter.github.com/bootstrap/base-css.html#forms ）で使用している検索フォームと非常によく似たWebサイトの検索フォームのスタイルを設定しようとしています。ただし、検索ボタンの高さは入力要素よりもはるかに大きくなるため、私の目標はそれらを同じ高さにすることです。

私がやろうとしていることを上書きするCSSスタイルがあると思いますが、FireBugを使って死にましたが、答えが見つかりません。または、私が見落としている非常に単純なものである可能性があります。

いずれにせよ、どんな助けでも大歓迎です。

4

4 に答える 4

0

Line-heightは、単純な「height」宣言がボタンのサイズを変更するのを防ぎます。以下を使用してボタンのサイズを変更できました。 

.form-search .input-append .btn {
line-height: 10px;
}

問題は、これにより物事が非常に小さくなることです。使いやすさのために、ボタンに一致するように入力を大きくすることを検討します。

お役に立てば幸いです。

ニック

于 2012-11-05T19:14:56.537 に答える
0

type="search"からに変更してみましたtype="text"か？私の推測では、検索はカスタマイズできませんが、テキストはカスタマイズできます。

于 2012-11-05T18:56:39.257 に答える
0

これをスタイルシート (セクションまたはファイル) の最後に追加します。

input.search-query {
  line-height: 30px;
  padding: 5px;
  height: 30px;
}

これを Chrome Inspector に追加すると、検索ボックスがボタンと整列します。既に input.search-query を宣言していることは問題ではありません。padding-rightただし、複数回定義するなどして、CSS で実際にクリーンアップできるようです。

結果のスクリーンショットの一部http://tinypic.com/view.php?pic=2lmtnht&s=6

于 2012-11-05T20:57:21.870 に答える
0

どちらに変更してほしいかわからなかったので、両方を示します。

ブートストラップ CSSのクラスから' padding: 4px 14px;' と ' ' を削除して、ボタンを入力フィールドと同じくらい小さくします。line-height: 20px;.btn

入力フィールドをボタンに合わせて大きくするに'height: 20px;'は、ブートストラップ css のこの大規模なセレクターから削除します。

'select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input'

于 2012-11-05T19:24:48.510 に答える