CSS - 如何强制文本输入填充容器的剩余空间

时间:2013-06-29 17:57:18

标签: javascript css

我有div和div里面的div是浮动子div和一个文本输入。我需要强制文本输入来填充重放水平空间并保持在同一行,除非一些最小宽度条件将该输入放置到下一行。可能吗?我不想使用javascript。

这里是示例(写标签并按回车)

编辑示例:我的div宽度为300px。它包含3个具有不同宽度的左浮动div(例如30,60,100)和一个文本输入。我希望将文本输入放在与浮动div相同的垂直位置,因此它必须自动缩小以适应剩余空间(300-(30 + 60 + 100)= 110px)。该文本输入具有一些最小宽度,因此它可以防止它变小,在这种情况下它会跳转到下一行)。

http://plnkr.co/edit/sulxnvR58LnQqyI7ddFK?p=preview

2 个答案:

答案 0 :(得分:0)

您可以尝试添加以下内容:

style="width: 100%; min-width=2000px;"

http://plnkr.co/edit/uuL91pnUBkBRHMziaGBs?p=preview

答案 1 :(得分:0)

你能不能只使用百分比宽度输入和溢出隐藏?

添加此CSS

div.tag-wrapper input[type=text] {
    width: 100%;
}
div.tag-wrapper {
    padding: 5%;
    overflow: hidden;
}
相关问题