0

私はこれを持っています

            <td width="312" valign="center" height="157" background="{{ 'BT_S3.png' | asset_url }}">
             <div style="width:95%; text-align: left; height:52px; background-image:url('{{ 'search_bar.png' | asset_url }}');" float="left">
            <form action="/search" method="get">
            <input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />
            <input type="image" value="Search"  src="{{ 'search_button.png' | asset_url }}"  />
            </form>
            </div>
            </td>

これは、 http ://clarkbetty.myshopify.com/#にある検索ボックスの HTML です パスワード: betweu

検索ボックスとボタンが同じ行にあるように、検索ボタンを浮かせたいと思います。私は多くのことを試しましたが、何もうまくいきません。誰か助けてくれませんか？

4

3 に答える 3

1

style="float:left"テキスト ボックスとボタン要素の両方に追加する必要があります。

<input type="text" [...] style="float:left" />
<input type="image" [...] style="float:left" />

また、代わりにこれらのルールを css ファイルに入れ、これらの要素を ID またはクラスで参照する方がよいことにも注意してください。

于 2012-04-25T22:29:07.617 に答える
0

この行を変更します。

<input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />

これに：

<input type="text" style="float:left;" name="q" src="{{ 'search_bar.png' | asset_url }}" />

float:left は style 属性内にある必要があります。

于 2012-04-25T22:30:41.063 に答える
0

もう 1 つの方法は、ラッピングform要素に相対位置を適用し、内部コントロール (検索フィールドとボタン入力) に絶対位置を使用して、その内部のレイアウトを制御することです。

これらの行に沿って何か：

form {
    position: relative;
}
input[type='text'],
input[type='image'] {
    position: absolute;
    top: 0;
}
input[type='text'] {
    left: 0;
    width: 100%;
    padding-right: 20px;
}
input[type='image'] {
    right: 0;
    width: 20px;
}
于 2012-04-25T22:28:41.920 に答える