html和CSS：将选择对齐到表格的右边缘

Question

考虑以下HTML代码段。 理想的效果是将下拉菜单放置在桌子的正上方。

<!-- this is actually in a proper CSS class, not inline-->
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 

<form method="post">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>

上面的渲染像这样：

表，然后选择向右浮动http://www.imagechicken.com/uploads/1253124526051538700.png

问题：如何编写CSS以实现像这样的模型定位？

所需的http://www.imagechicken.com/uploads/1253124791005327900.png

Answer 1

添加clear: both; 表的CSS。 这将清除div上方的div浮动（带有下拉菜单）。

但是，为什么不直接text-align: right;呢？ 您的div，那么您就不必再搞砸了float和内嵌div。 那也应该工作。

Answer 2

一种方法是向两个div添加绝对定位。

要么

其他方法是使用表。 例如：

 <table>
    <tr><td>
    <form method="post">
    <div style="float:right;display:inline;">Show Me:
        <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
          <option>30</option>
          <option>50</option>
          <option>100</option>
        </select>
    </div>
    </form>
    </td></tr>
    <tr><td>
    <div>
    <div style="float:left; 
                min-height:1px;
                padding:15px 2% 20px;
                position:relative;
                width:96%;"> 
    hello world
    </div>
    </td></tr>
    </table>

要么

在具有float：right的div周围再添加一个div。 例如：

<form method="post">
<div style="float:left; width:300px">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</div>
<div>
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 
hello world
</div>

Answer 3

你可以在桌子上另外一个单元格

<table>
<tr>
<td colspan="2">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</td
</tr>
<tr>
<td>table head</td>
<td>table head</td>
</tr>
<tr>
<td>content1</td>
<td>ontent2</td>
</tr>
<tr>
<td>content3</td>
<td>content4</td>
</tr>
</table>

这应该工作..或您可以使用CSS。 但这是最快的方法：-？ 至少在您制作/找到一些CSS之前。 您可以在两个div上都使用float