不能垂直对齐浮动元素和周围元素

Question

我有一些关于浮动元素对齐的问题,我正在尝试制作内部有几个元素的表格单元格.与文本输入一样,然后是下拉列表,当用户调整浏览器窗口大小时,只应调整文本输入的大小.在这里,我是如何做到的:

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space: nowrap; width: 20%;">
            <div><span style="float: right; display: block;">
                <select style="display:show;width:60px">
                    <option selected="" value="1">1</option>
                    <option value="2">2</option>
                </select>
                </span> <span style="display: block; overflow: hidden; padding-right: 2px;">
                <input type="text" value="100.0" style="width:100%; text-align:right"/>
            </span></div>
        </td>
    </tr>
</table>

但浮动元素看起来有点高,非浮动.

此外,我有另一种情况,当我有链接,然后输入文本字段,然后下拉或其他链接,再次,输入字段应该是唯一的可重新分区元素.

这是代码

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space:nowrap; width: 30%;">
          <span style="display: block; float: left; padding-top: 3px;">
            <a href="return false;"><img width="14" height="14" src=""/>
            </a>&nbsp;
          </span>
          <span style="float: right; display: block; padding-top: 5px;">
        <a href="return false;">&nbsp;?</a>
          </span>
          <span style="display: block; overflow: hidden; padding-right: 2px;">
        <input value=""style="width: 100%;">
          </span>
         </td>
    </tr>
</table>

在这种情况下,非浮动元素是其他元素的上层:

基本上,我需要以某种方式垂直对齐第一个样本中的浮动元素,因此它的底部将与非浮动元素的底部相同,而在第二个示例中,我需要以某种方式对齐非浮动元素的底部,因此它将会与浮动元素相同.

我试图让它工作在7,8,9,10.

添加填充可以解决这个问题,但是在firefox,chrome中看起来会很难看.

编辑:

或者至少告诉我为什么不能这样做.

EDIT2:

或者,如果问题是表标签？所以我需要使用不同的东西(div).整个结构只是一个表,只有细胞中有一些选择和类似的东西,所以在这里使用表是很自然的.但是,如果问题出在桌面上,我会尝试用div重新创建它.

EDIT3:

即使我删除了表,样本1中的右浮动元素也要高一些.我尝试用填充和绝对定位替换浮动,但仍然更高.

Edit4:

对于样本1,如果我display: none为左元素设置,则浮动元素垂直位置变为正常.

*** UPDATE: Sorry that was my mistake to put bounty on this question, i've already solved my problem.***

Answer 1

工作示例:http://jsfiddle.net/qARBL/1/

在此之前 - 请,请,请不要使用inline styling- 这是如此老派!请改用外部CSS样式表.

将以下css添加到HTML中:

1.

<select style="display:show;width: 60px;margin: 0;">
    <option selected="" value="1">1</option>
    <option value="2">2</option>
</select>

2.

<input type="text" value="100.0" style="width:100%; text-align:right;margin: 0;padding: 0;">

只需调整上面两个元素的边距和填充就可以了.