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>

但是浮动元素看起来有点高于非浮动。 enter image description here

此外，我有另一种情况，当我有链接，然后输入文本字段，然后下拉列表或其他链接，再次，输入字段应该是唯一的可恢复元素。

这是代码

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

在这种情况下，非浮动元素高于其他元素：

enter image description here

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

我试图让它在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;">

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

Answer 2

至少我找到了案例1的解决方案。错误的浮动元素可以通过用position: absolute; right: 0; bottom: 0; 替换浮点数来修复：0 是重要的部分。不要忘记，应该将填充权限添加到左侧的输入中，外部元素位置应该更改为相对。

Answer 3

您不能使用float和vertical-align parallel。浮动元素总是垂直对齐：顶部。

如果您使用display: inline-block，则可以（对于IE lt 9，使用*zoom: 1, *display:inline;黑客攻击）。

不幸的是，使用此方法，HTML代码中的空格将显示在结果中。有两种解决方法。

如果您拥有完整的源代码管理，请删除代码中的空格
为周围的区块提供0

请参阅此处的一些演示代码：http://jsfiddle.net/HerrSerker/3yMcS/

Answer 4

我真的没有用你的标记/ css获得你想要实现的东西，但也许那是因为你正在使用 table + floating + vertical aligning 一些东西。无论如何，我清理了第一个问题，想到在这里发布代码：

<style type="text/css">
.container { vertical-align: bottom; }
.content { white-space: nowrap; width: 20%; }
.col1 { float: right; display: block; }
.col1 select { display: block; width: 60px }
.col2 { display: block; overflow: hidden; padding-right: 2px; }
.col2 input { width: 100%; text-align: right }
</style>

<div class="container">
    <div class="content">
        <div class="col1">
            <select>
                <option selected="" value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div class="col2">
            <input type="text" value="100.0"/>
        </div>
    </div>
</div>

在此处查看：http://jsfiddle.net/dreamyguy/MKQ75/

请注意，display: show为not valid CSS，因此我将其更改为display: block。

另一件需要注意的事情是floated elements和absolutely positioned elements一样滑。它们不属于文档的正常流程，因此应小心处理。除非必须，否则不要浮动元素，如果必须，请更改父元素的样式。兄弟姐妹 - 这样你就能得到你期望的结果。

Answer 5

我不需要在底部对齐所有元素，但是因为它是在CSS中提供的，所以你需要它，所以很有用。

我在使用table而不是div的方法中没有看到任何错误。事实上，当您的输入框增大或缩小时，它可以帮助您保持其他元素的宽度。

我建议您使用多个td标记，将元素放在单独的td标记中，并将宽度放在表格或tr而不是td标记上。而不是使用太多的span元素来添加inline-css（它不是旧学校），将它添加到td标签或元素标签。如果在这里难以理解的是jsfiddle

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


<hr>

<table style="width: 100%;">
<tr style="width: 30%;">
    <td style="white-space:nowrap;width:16px;height:auto; ">
        <a href="return false;"><img width="14" height="14" src=""/>
        </a>
    </td>
    <td>
      <input type="text" value="" style="width: 98%;margin:2px;">
    </td>
    <td style="width:14px;">
     <a href="return false;">&nbsp;?</a>
    </td>
</tr>
</table>

在css部分中，通过取消注释边框部分，您将看到元素在每个相应行的表格中如何相互叠加。
同时通过取消注释vertical-align属性并将其更改为中间，您会看到更好的布局，但我不确定您的特定情况是否需要它以您要求的方式。

Answer 6

我尝试了一种不同的方法，假设您可以为其他不需要调整大小的元素设置固定，您可以利用calc()并避免使用float和{{ 1}}。

以下是演示：http://jsfiddle.net/RcSfF/

HTML

table

CSS

<input/><select><option>a</option></select>

您需要使用polyfill在旧浏览器上模拟input,select{ box-sizing: border-box; } input{ width: calc(100% - 60px); } select{ width: 60px; }。

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

6 个答案:

HTML

CSS