html - 给文本输入剩余宽度

  显示原文与译文双语对照的内容
0 0

我有一个标签,输入和按钮一行。 标签和按钮的宽度是动态的,它们接受所包含文本的宽度。 标签向左对齐,右边的按钮向右对齐。

我希望按钮对齐到最右边,中间的输入将占用所有剩余空间。

我在按钮上放了一个 float: right,但如果把输入的宽度放到 100% 上,那么就像一个 block 元素一样。

在这里实现我想要做的是最好的还是最简单的方式? 这对我来说有点棘手。 我不确定该怎么做。


label {
 margin-right: 10px;
}
input[type=text] {
 width: 355px;/*100% doesnt work*/
 height: 20px;
 padding: 5px 10px;
}
input[type=text]:focus {
 outline: 0;
}
button {
 margin-left: -1px;
 float: right;
 vertical-align: bottom;
}

<fieldset class="last">
 <label for="place">Any text here:</label>
 <input type="text" id="place" value="Test value">
 <button>Click</button>
</fieldset>

JSFiddle演示插件

时间: 原作者:

0 0

这里有一个hacky的方法:


table {
 width: 100%;
}
.fixedText {
 width: 1px;
 white-space: nowrap;
}
.relativeText {
 width: 100%;
 }
#place {
 width: 100%;
 }

<table>
 <tr>
 <td class="fixedText">
 <label for="place">Any text here:</label>
 </td>
 <td class="relativeText">
 <input type="text" id="place" value="Test value">
 </td>
 <td class="fixedText">
 <button>Click</button>
 </td>
 </tr>
</table>
原作者:
0 0

只是为了展示你也可以在没有表( 虽然我可能会去找 display: table-cell )的情况下。

首先将 labelbutton 向左和向右浮动。 在 input 周围添加一个包装器。 包装器获取创建新的block 格式上下文的overflow: hidden,见 http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ background 信息。 简而言之,这允许包装器占用剩余的空间。

之后我们对 paddingbox-sizingheightline-height 应用一些修正,使它们看起来很好。


label {
 height: 40px;
 line-height: 40px;
 margin-right: 10px;
 float: left;
}
.wrapper {
 overflow: hidden; 
}
input[type=text] {
 width: 100%;
 height: 40px;
 padding: 5px 10px;
 box-sizing: border-box; 
}
input[type=text]:focus {
 outline: 0;
}
button {
 margin-left: -1px;
 float: right;
}

<fieldset class="last">
 <label for="place">Any text here:</label>
 <button>Click</button>
 <div class="wrapper"><input type="text" id="place" value="Test value"></div>
</fieldset>
原作者:
...