3

我很想在这里使用表格，因为我似乎无法想出一些 CSS 来完成我在这里尝试创建的内容。

我有一个<div>包含两件事的容器：

  • 文本输入框 ( <input type='text' />)
  • 一个按钮 ( <input type='button' />)

我希望按钮右对齐（我没有给它一个固定的宽度，但我很容易做到）。文本输入框应直接位于按钮的左侧并占用剩余空间。这是我正在寻找的示例：

在此处输入图像描述

不幸的是，下面的 HTML 没有做到这一点（请原谅内联样式 - 仅用于演示目的）：

<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />

我尝试添加一个<div>wrapper，但这也不起作用。我究竟做错了什么？我可以通过布局轻松完成此<table>操作，但我确信我一定遗漏了一些东西，并且有更好的方法来做到这一点。

4

2 回答 2

10

没有 是可能的<table>，但不是很明显。

见：http: //jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" />
<div style="overflow: hidden; padding-right: 8px">
    <input type="text" style="width: 100%;" />
</div>

这里解释了这个工作的原因。

于 2011-10-09T04:56:33.807 回答
2

只要您不介意固定宽度的按钮，就应该这样做：

http://jsfiddle.net/4WghJ/

基本上只是将输入包装在一个带有右边距的 div 中以补偿按钮。

于 2011-10-09T04:59:38.190 回答