我正在使用已经响应并且工作正常的网站.我试图在右侧添加一个带有按钮的文本输入字段,并希望文本输入自动调整大小,按钮保持固定大小.
一般的HTML / CSS是：
视觉：
+---------------- container (autosize) --------------+| +------------------------------------------------+ || | text (autosize) | btn | || +------------------------------------------------+ |+----------------------------------------------------+
期望的行为：
容器div将根据显示宽度自动调整大小 – 这已经处理完毕. btn div的大小与按钮的宽度完全相同 – 这也已经完成了.
我想文本输入div自动调整文本输入是文本div的100％.
这可能吗？我想我已经提供了足够的信息,但我很乐意提供所需的任何其他细节.我已经在这方面工作了好几个小时,此时我很沮丧.
编辑
我可能没有足够清楚地解释所期望的行为.
#container width根据显示宽度而变化.这已经完美地发生了.它可以是960px宽度,一直到320px宽度.
#btn不是固定宽度.它将一直定位到#container的右边缘.
#text width需要自动调整大小以占用#container左边和#btn右边距之间的整个宽度.
最佳答案
我会用旧学校的桌子.以下内容应为您提供一个起点：
a)添加一个充当表行的包装器div：
b)将div设置为table,table-row和table-cell
#container { display: table; width: 100%;}#temp { display: table-row;}#text,#btn { display: table-cell;}
c)将第一个单元格的宽度设置为100％;这使得单元尽可能宽,同时保持其他单元尽可能窄：
#text { width: 100%;}
d)将输入框设置为100％：
#text input { width: 100%;}
e)改进.
