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 here。

我想让带有绿色背景的div显示在文本框的右边。

Answer 1

将输入浮动：

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

Example here

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;">

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

4 个答案: