Question

我有以下内容......

<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，而不是让搜索栏在页面中展开，只是在其中显示（在右侧）我该如何解决？

Answer 1

不确定您正在寻找什么，但从我可以收集到的内容中，您想要一个带有选择的输入。

为此，将div设置为position：relative并将select和input放入其中。然后将输入设置为width：100％，将select设置为position：absolute和top：0px;右：0像素;

请参阅http://jsfiddle.net/L593G/7/了解此工作的一个示例。

从这里你可以使用top和right来控制select的位置和div的宽度来控制整个控件的宽度。

此技术称为相对绝对定位，可在此处找到更多信息http://css-tricks.com/absolute-positioning-inside-relative-positioning/

希望这会有所帮助： - ）

Answer 2

float:left和<div>

上的

<select>

请参阅我在jsfiddle上的示例 - http://jsfiddle.net/Gpy9Y/

哦，你为什么要用桌子？ NO NO NO NO !!!

更新（格林尼治标准时间15:28）：

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

你应该使用@Michael Allen的例子。但如果你必须坚持目前的标记，这将有效。 http://jsfiddle.net/Gpy9Y/5/

在选择搜索栏时遇到问题

2 个答案: