0

質問のタイトルが非常に奇妙に聞こえることは知っていますが、他に何と呼ぶべきかわかりませんでした。

.search-wrapperまず、幅を 50% にして右にフロートさせたいグリッド レイアウトがあります。jsfiddleの私のデモでは、全体.search-wrapperが緑色の背景色になっています。この要素はグリッドに収まる必要があるため、そのままにしておくことが重要です。

この.search-wrapper中に、検索ボックスとボタンの両方が横に並んでいます。これがまさに私が望んでいる方法です。したがって、#search-buttonを左にフロートさせ、inputを右に揃える必要があります。

しかし、私が達成できないことは、両方をフロートする方法です -#search-buttonと「input to the right inside the outer container.search-wrapper」。

現在の状況…</p>

ここに画像の説明を入力

私が望んでいる方法 … </p>

ここに画像の説明を入力

ここに私の問題のデモがあります : http://jsfiddle.net/mQSBR/2/ よろしくお願いいたします。ありがとうございました！

4

4 に答える 4

2

これが必要な効果である場合は、これを参照してください: http://jsfiddle.net/mQSBR/9/ [編集]

div.search { width: 180px; float: right; } /* fix to 180px wide, float to right */

また、次を追加します。

.search-wrapper {
    min-width: 180px;
}

そのため、サイズ変更時にラッパーが .search div を超えません。

于 2012-07-01T07:06:38.750 に答える
1

更新されたjsfiddleのソリューションは次のとおりです

<div class="wrapper search-wrapper">
  <div class="search">
    <form action="/" method="get">
      <fieldset>
         <input type="text" name="s" id="search-box" value="" class="" placeholder="Search this platform …">
            <button type="submit" id="search-button">Search</button>
      </fieldset>
    </form>
 </div>

</p> 

.search-wrapper {
width: 50%;
float: right;
background:green;
margin-top:1em;

}

#search-box {
border: none;
background-color: transparent;
color: transparent;
height: 20px;
float: right;

}

#search-button {
border: none;
background-color: transparent;
color: transparent;
float: right;
background-color:red;
background-position: center -36px;
background-repeat: no-repeat;

}

</p>

検索ボックス/ボタンの右揃え

また、私の提案は、オーバーフローするラベルの代わりに要素のプレースホルダー属性を使用することです

于 2012-07-02T09:33:34.260 に答える
0

あなたはこのようなことをすることができます

.search {
  float: right;
  width: 80%;
}
于 2012-07-01T07:03:16.873 に答える
0

あなたはこれを行うことができます：

<fieldset style="margin-left: 20%">
  <div class="input-inside-label">

http://jsfiddle.net/userdude/mQSBR/3/

overflow-xスクロールバーを補うためにいくつかの編集を行いました：

#search-button {
    ...
    margin-left: -20px;
    ...
}
.input-inside-label {
    ...
    margin-left: 0;
    width: 70%;
    ...
}

http://jsfiddle.net/userdude/mQSBR/7/

于 2012-07-01T07:03:34.337 に答える