3

我有几个关于浮动元素对齐的问题，我正在尝试制作里面有几个元素的表格单元格。就像文本输入然后下拉一样，当用户调整浏览器窗口大小时，只有文本输入应该调整大小。在这里，我是如何做到的：

<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 中看起来会很丑。

编辑：

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

编辑2：

或者如果问题出在表格标签上？所以我需要使用不同的东西（divs）。整个结构就是一个表格，唯一的区别就是cell里面有一些select之类的，所以这里用table是很自然的。但是，好吧，如果问题出在表上，我会尝试用 div 重新创建它。

编辑3：

即使我删除了表格，样本 1 中的右浮动元素也会更高一些。我试图用填充和绝对定位替换浮动，但它仍然更高。

编辑4：

对于示例 1，如果我设置display: none为左元素，则浮动元素垂直位置变为正常。

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

6 回答 6

5

工作示例：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;">

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

于 2013-04-01T05:51:46.323 回答
1

我真的没有得到你想要用你的标记/css实现的东西，但也许那是因为你正在使用表格+浮动+垂直对齐的东西。无论如何，我清理了第一个问题，想到在这里发布代码：

<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是无效 CSS的，所以我将其更改为display: block.

另一件需要注意的是，它floated elements与absolutely positioned elements. 它们超出了文档的正常流程，因此应小心处理。除非必须，否则不要浮动元素，如果这样做，请更改父级和兄弟级的样式 - 以便获得预期的结果。

于 2013-04-03T22:41:51.103 回答
1

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

我认为您使用 table 而不是 div 的方法没有任何问题。事实上，它可以帮助您在输入框大小增加或缩小时保持其他元素的宽度不变。

我建议你有多个 td 标签，将你的元素放在单独的 td 标签中，并将宽度放在 table 或 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 部分中，通过取消对边框部分的注释，您将看到您的元素在表格中的每一行中是如何相互堆叠的。
此外，通过取消注释垂直对齐属性并将其更改为中间，您会看到更好的布局，尽管我不确定您的特定情况是否需要您要求的方式。

于 2013-04-05T13:38:03.773 回答
1

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

这是演示：http: //jsfiddle.net/RcSfF/

HTML

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

CSS

input,select{
    box-sizing: border-box;
}
input{ 
    width: calc(100% - 60px);
}
select{
    width: 60px;
}

你需要一个 polyfill 来模拟calc旧的浏览器。

于 2013-04-05T23:45:13.310 回答
1

您不能并行使用浮动和垂直对齐。浮动元素总是垂直对齐：顶部。

如果您display: inline-block改用，则可以（使用*zoom: 1, *display:inline;IE lt 9 破解）。

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

  1. 如果您有完整的源代码控制，请删除代码中的空格
  2. 给周围块的字体大小为 0

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

于 2013-04-03T07:13:45.683 回答
1

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

于 2013-04-01T08:30:04.103 回答