19

これはおそらく簡単ですが、私はそれを行う方法がわかりません。現在、このコードでは、「検索」ボタンは入力「場所」ボックスの下の行にあります。ほとんどの検索ボックスが機能するように、右側の同じ行に配置するにはどうすればよいですか?

HTML

<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
</div>

CSS

field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}

リンク http://jsfiddle.net/VL3Dj/

4

7 に答える 7

54

テキストボックスと100% widthそれ以外のボタンが必要な場合は、次のようにすることができます：My Fiddle

<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
   <input type="text" style="width: 100%;" />
</div>​
于 2012-10-12T12:25:37.023 に答える
8

............デモ

こんにちは今このcssを追加します

.fieldwrapper{
white-space: nowrap;
}

ライブデモ

于 2012-10-12T12:26:43.993 に答える
3

ボタンを機能させるには、ボタンの幅を知るだけで済みます。次に、基本的に入力に全幅を与え、ボタンを絶対右に配置します。パディングは、ボタンの後ろにテキストが置かれないようにするためです。

    <form method="post" action="">
      <input type="text" name="search-str" id="search-str" value=""/>
      <button type="submit">Submit</button>
    </form>

CSSに関しては：

form {
  position: relative;
}

input {
  width: 100%;
  padding-right: 40px;
}

button {
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
}
于 2014-11-19T11:37:18.640 に答える
1

これは、入力フィールドの幅が 100% に設定されており、横にボタンを配置するスペースがないためです。

ここに固定バージョンがあります: http://jsfiddle.net/ThfES/1/

于 2012-10-12T12:25:10.190 に答える
0

float要素をブロックして、いわば並べて表示する必要があります。inlineのような要素は、デフォルトでこれ<a>を<span>行います。CSSボックスモデルの詳細をご覧ください。

あなたの解決策：http：//jsfiddle.net/HBJtT/

編集：inputフィールドをできるだけ100%広く保つ。

考えられる解決策：http：//jsfiddle.net/3TZL8/

ただし、このソリューションはサポートしていません。入力テキストフィールドを100%広く保つ動機が、ボタンとフィールドが「シームレスに一緒に」見えるようにする場合は、グリッドまたはUIフレームワークを使用する必要があります。私はFoundationフレームワークが好きです、可能な解決策はここで見ることができます：http: //foundation.zurb.com/docs/forms.php（「接尾辞アクションで入力」の例までスクロールダウン）

于 2012-10-12T12:27:11.043 に答える
0

以下を試してください、幅：50％

input.field{width:50%}​
于 2012-10-12T12:28:18.377 に答える
0

次のようなことができます（私の場合はうまくいきました）：

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

ここにデモがあります：http://jsfiddle.net/gn3qx6w6/1/

于 2014-09-30T08:24:52.950 に答える