2 
    <div id="header">
        <div id="search" style="float:right;width:250px;padding:20px 6px 6px 6px;">
            <form action="/" method="get" id="frmSiteSearch" name="frmSiteSearch">
                <input type="text" id="searchbox" name="keyword" size="20"/>
                <div style="width:22px;height: 19px; float:left;background-color:green;">
                </div>
            </form>
        </div>          
    </div>

ここにjsbin があります。

背景が緑色のdivをテキストボックスの右側に表示したい。

4

4 に答える 4

4

入力を左にフロートします:

<input type="text" id="searchbox" name="keyword" size="20" style="float:left;"/>

例はこちら

于 2012-05-17T11:38:55.213 に答える
2

ここにhttp://jsfiddle.net/Jams/Xns64/リンクがあります

    <div id="header">
        <div id="search" style="float:right;width:250px;padding:20px 6px 6px 6px;">
            <form action="/" method="get" id="frmSiteSearch" name="frmSiteSearch">
                <input type="text" id="searchbox" style="float:left;" name="keyword" size="20"/>
                <div style="width:22px;height: 19px; float:left;background-color:green;">
                </div>
            </form>
        </div>          
    </div>
于 2012-05-17T11:39:23.677 に答える
2

コードを見る

<style>     
#searchbox, #button {
  float:left;
  width:150px;
  height:19px;
}

    #button {
  width:20px;
  background:green;
}   
  </style>


        <div id="header">
            <div id="search" style="float:right;width:250px;padding:20px 6px 6px 6px;">
                <form action="/" method="get" id="frmSiteSearch" name="frmSiteSearch">
                    <input type="text" id="searchbox" name="keyword" size="20"/>
                    <div id="button">
                    </div>
                </form>
            </div>          
        </div>

http://jsbin.com/igodip/11/edit

于 2012-05-17T11:41:56.343 に答える
0

緑色の div のコードを次のように修正します。

<div style="width:22px;height: 19px; float:right;background-color:green;">
于 2012-05-17T11:41:13.573 に答える