CSS - 將div對齊文本框的右側

<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。CSS - 將div對齊文本框的右側

我想讓綠色背景的div出現在文本框的右側。

來源

2012-05-17 SyAu

浮動輸入左：

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

Example here

來源

2012-05-17 11:38:55 ManseUK

感謝@ManseUK。有用。 10分鐘後我會接受。 – SyAu

這裏是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-17 11:39:23 jams

對不起，這是行不通的。 – SyAu

@SyAu我已經更新了我的答案。現在它應該工作。 – jams

完美。現在它可以工作。 – SyAu

更正代碼，綠色分度：

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

來源

2012-05-17 11:41:13 Akina91

不工作。文本框和綠色div之間有一些空格。 – SyAu

除了答案之外，請嘗試提供有關答案如何工作的解釋（或指出原因即鏈接） – javydreamercsw

看到代碼

<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-17 11:41:56

CSS - 將div對齊文本框的右側

回答

相關問題