html - CSS - 将 div 对齐到文本框的右侧

Question

    <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 出现在文本框的右侧。

Answer 1

将输入向左浮动：

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

这里的例子

Answer 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>

Answer 3

看代码

<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

Answer 4

更正绿色 div 的代码：

<div style="width:22px;height: 19px; float:right;background-color:green;">