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

请考虑以下HTML代码片段。预期的效果是将一个下拉列表放置在表格的正上方。html和css：将select对齐到表格的右边缘

<!-- 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

来源

2009-09-16 p.campbell

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

但是，为什么你不只是text-align: right;你的div，那么你不必乱七八糟的浮动和内联div。这应该也是一样。

来源

2009-09-16 17:15:16 Joost

一种方法是将绝对定位添加到两个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>

或

再添加一个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>

来源

2009-09-16 17:18:41 ajitdh

尽可能地避免绝对定位div。绝对定位元素不参与正常的布局流程，因此很难在页面中保留结构。 – Joost 2009-09-16 17:22:29

你说得对。维护一个具有很多绝对定位的页面是非常困难的。当你想把所有东西都放到5px的时候，你必须手动将所有控件的样式改为5px。我曾经体验过这一点。但它会解决pcampbell所说的问题，我想。 – ajitdh 2009-09-16 17:39:24

你可以再拍细胞的表

<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上都使用浮点数

来源

2009-09-17 07:22:36 DanTdr

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

回答

相关问题