【続】inputテキストの横にinputボタンを配置するには

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("<input>", { type: 'texg', id: 'keyword' }).appendTo('#keyword'); }); </script> </head> <body> <div id="keyword"> <input type='submit' value='検索'></div> </body> </html> URL http://low-cost-travel.lk6.co/test116.php

今現時点だと検索ボタンが左にきてしまいます。
divの後にinputボタンのコードを書いてみましたが
inputテキストの下に表示されてしまいます。
どうにかして下記の配置にする事はできないでしょうか？

[input text][input bottan]

行動規範の内容に同意します

回答2件

例えばこんな風にしてみては？

    <div>
      <span id="keyword"></span>
      <input type='submit' value='検索'>
    </div>

![イメージ説明]WIDTH:210

投稿2015/06/14 08:02

katoy

総合スコア22324

退会済みユーザー

2015/06/14 08:47

説明が下手で大変申し訳ないのですが、既に知っております(^_^;) 今回はtextの方はjQeryでsubmitはhtmlタグでやりたいと考えております。本当は一度に両方jQueryでやりたいのですが、一度にやるといつも思うようにいかないので段階を分けてやるようにしております。

退会済みユーザー

2015/06/14 09:05

追記：極力DIVタグで統一を考えておりますので。

katoy

2015/06/14 09:07

> ... 両方jQueryでやりたい次のようにしてみてはいかがですか。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("<input>", {type: 'text', id: 'keyword'}).appendTo('#search'); $("<input>", {type: 'submit', value: '検索'}).appendTo('#search'); }); </script> </head> <body> <div id="search"></div> </body>

行動規範の内容に同意します

ベストアンサー

こんにちは。

「submitボタンの前に id=keyword のテキスト入力のinput要素を挿入」
というのを、そのままJQueryで書いて、以下でいかがでしょうか？

lang
1<html> 
2<head> 
3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
4<script type="text/javascript"> 
5$(document).ready(function(){ 
6	$('input[type=submit]').before(
7		$("<input>", { 
8			type: 'text', 
9			id: 'keyword'
10			})  
11		);
12	}); 
13</script> 
14</head> 
15<body> 
16<div id="keyword">
17<input type='submit' value='検索'></div>
18</body> 
19</html>

ご参考になれば幸いです。

投稿2015/06/14 08:01

jun68ykt

総合スコア9058

退会済みユーザー

2015/06/14 08:49

せっかくサンプルソースを書いて頂いたにも関わらず申し訳ないのですが、実行結果(ボタンが左でテキストが右で)が全く変わりません。

jun68ykt

2015/06/14 08:56

こんにちは。以下に回答に挙げたソースをそのままコピペして作成したHTMLを挙げておきましたので、参考にして頂ければと思います。 http://www.gattolibero.sakura.ne.jp/teratail/q11276.html ちなみに私のブラウザ（Firefox 38.0.5）ではテキスト入力の右に[検索]ボタンが表示されています。

退会済みユーザー

2015/06/14 09:03

説明が下手な私の内容を理解して頂きありがとうございます。まさにこれが欲しかったのです！！今後もお力いただければ幸いでございます。

行動規範の内容に同意します

あなたの回答