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對齊到表格的右邊緣

回答

相關問題