有問題的定位選擇在搜索欄

我有以下...有問題的定位選擇在搜索欄

<td class="lst-td" width="100%" style=""> 
    <div style="position:relative;zoom:1"> 
     <input autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1"> 
     <span id="tsf-oq" style="display:none"> 
     </span> 
    </div> 
    </td> 

<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;"> 
    <option value=9999>"a value</option> 
</select>

目前的選擇只顯示旁邊是一個搜索欄，而不是讓搜索欄跨擴大TD該頁面並在其中顯示（在右側）我該如何解決這個問題？

來源

2011-02-25 Skizit

What's該部分的完整的HTML？你發佈的內容對我來說沒有多大意義。 – jeroen 2011-02-25 14:40:42

我加了剩下的東西。 – Skizit 2011-02-25 14:43:38

你說你遇到了一個潛伏問題，但你只在你的代碼中顯示一個div。 – Kyle 2011-02-25 14:44:14

不確定您正在尋找什麼，但從我可以看到你想要的輸入與頂部的選擇。

要做到這一點設置一個div位置：相對，並把它的選擇和輸入。然後將輸入設置爲寬度：100％，選擇位置：絕對和頂部：0px;右：0像素;

請參閱http://jsfiddle.net/L593G/7/瞭解此工作的示例。

從這裏您可以使用top和right來控制select和div的寬度來控制整個控件的寬度。

這種技術被稱爲相對絕對定位和更多信息可以在這裏找到http://css-tricks.com/absolute-positioning-inside-relative-positioning/

希望這有助於:-)

來源

2011-02-25 15:24:44

打敗我吧，再加上這不使用horid表！ +1 – Alex 2011-02-25 15:27:45

感謝您的+1。 – 2011-02-25 16:03:41

float:left上都<div>和<select>

查看的jsfiddle我的例子 - http://jsfiddle.net/Gpy9Y/

哦，你爲什麼要使用表？不不不不！！！

更新（4015：28 GMT）：

div{float:left; width:100%;} 
div input{width:100%;} 
select{position:relative; top:-20px; left:4px;}

您應該使用@邁克爾·艾倫的例子。但是，如果你必須堅持目前的加價，這將起作用。 http://jsfiddle.net/Gpy9Y/5/

來源

2011-02-25 15:08:40 Alex

這不起作用。我想要在查詢框中選擇。 – Skizit 2011-02-25 15:14:51

oooooh我的壞... – Alex 2011-02-25 15:22:17

有問題的定位選擇在搜索欄

回答

相關問題