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>

以上呈现如下：

table and select float right http://www.imagechicken.com/uploads/1253124526051538700.png

问题：如何编写我的CSS来实现像这个模型一样的定位？

desired http://www.imagechicken.com/uploads/1253124791005327900.png

Answer 1

将clear: both;添加到表格的CSS中。这将清除div上方的浮动（带下拉列表）。

但是你为什么不只是text-align: right;你的div，那么你不必乱用浮点数和内联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的div周围添加一个div：right。例如：

<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

html和css：将select对齐到表的右边缘

3 个答案: