4

送信ボタンと検索入力を揃えようとしましたが、うまくいかず、その理由がわかりません。私はこのスタイリングコードを持っています:

input[type=search] 
    border: none
    cursor: text
    padding: 0
    border: 1px solid #cfcfcf
.search-main input, .search-main button
    height: 30px
    display: inline-block

.search-main button 
    background: #55e0a8
    border: none
    width: 18%
    margin-left: -7px
    display:inline-block

.search-main input
    width: 80%

そしてこのhtml：

<form method="get" class="search-main">
    <input name="q" type="search">
    <button type="submit"></button>
</form>

そして、ここに私が得るものがあります:

ここに画像の説明を入力 オンライン版はこちら

かなりばかげた質問ですが、40 分以上試してみたので、ここに投稿しようと思いました。私はfirebug、パディング、マージンで遊んでいますが、問題の原因がわかりません。

4

4 に答える 4

4

あなたが試すことができます -

.search-main > button {
float: right;
}

ここに画像の説明を入力

于 2013-05-15T12:38:56.037 に答える
1

heightインライン要素で使用すると問題が発生します。

単純に両方の要素を削除しheightて置き換えることができます:padding

.search-main input, .search-main button {
  padding: 10px 0;
  display: inline-block;
}

.search-main button {
  background: #55e0a8
  border: none
  width: 18%
  margin-left: -7px
  display:inline-block
  padding: 11px 0; // +1px for border on the input
}
于 2013-05-15T12:40:23.247 に答える
1

簡単でした。次のコードが必要なもので十分であることを願っています。

.search-main button {
                    background: #55e0a8;
                    border: none;
                    width: 18%;
                    margin-left: -7px;
                    display: inline-block;    //additional code
                    float: left;              //additional code  
                    vertical-align: middle;   //additional code
                    height: 32px;             //additional code 
                    }

そしてこれは入力用です：

<input name="q" type="search" style=" display: inline-block;float: left;">
于 2013-05-15T12:51:16.687 に答える