Html CSS，两列-左侧为动态宽度（输入），右侧为固定宽度（按钮）

有人能给我指出一个解决办法吗

HTML

以下是代码笔示例：

输入字段应可伸缩，按钮应固定在右侧

先谢谢你

//编辑

---

我不能使用table标签，因为布局需要有响应。

我给

输入的
一个
calc（100%-110px）
的宽度和按钮a
float:right
，结果是。这就是你需要的吗？据我所知，您想要使用的输入类型是用户无法扩展的

CSS

.container {
  display: table;
  width: 100%;
  background-color: red;
}

.left, .right {
  display: table-cell;
}

.right { 
  width: 100px; 
  float: right;
}

input.left {
  width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}

这是一个完全响应的解决方案

HTML

我建议您将表单元素放入
，因此不要更改其默认显示属性，然后根据需要将左侧输入框设置为100%宽度


.container{
显示：表格；
宽度：100%；
背景色：红色；
}
.左，.右{
显示：表格单元格；
}
.对{
宽度：100px；
}
.左输入{
宽度：100%；
框大小：边框框；
}

一些按钮
我认为您希望使用的是文本区域，而不是输入。它必须是输入。请问为什么？文本区域是可调整大小的文本输入。您甚至可以使用
max height
和
height
属性来停止垂直调整大小。Textarea是一个多行输入。也许我没有得到你想要的。您（a）想通过拖放调整div的大小，还是（b）想通过屏幕大小调整div的大小？谢谢，这是我的解决方案。谢谢您的努力。@Zigson阅读此@Zigson有趣的是，它在Firefox上不起作用，但很有意义，因为
表格单元格
的行为类似于
，但是
是一个自关闭标签，里面不能包含任何内容。它在Firefox上不工作吗？好吧，那就额外收费吧！：）@齐格森：不，它不起作用，当然，我在上面的回答中提出了这一点。
.container {
    display: table;
    width: 100%;
    background-color: red;
}

.left, .right {
   display: table-cell;
}

.right { width: 100px; }

.container {
  display: table;
  width: 100%;
  background-color: red;
}

.left, .right {
  display: table-cell;
}

.right { 
  width: 100px; 
  float: right;
}

input.left {
  width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}

   <div class="container">
        <div class="input-flied-box">
            <form>
                <input type="text" required="required" placeholder="Right Some thing" />
                <button type="submit" class="submit-button">Send</button>
            </form>
        </div>
    </div>

/* RESPONSIVE CSS */
.container{
    width: 100%;
}
.input-flied-box{
    width: 100%;
}
.input-flied-box input{
    padding: 6px 12px 6px 12px;
}
.submit-button{
    top: inherit;
    right: inherit;
    position: relative;
    margin-bottom: 15px;
}
@media (min-width: 768px){
.container{
    width: 750px;
}
.input-flied-box{
    width: 600px;
}
.input-flied-box input{
    padding: 6px 101px 6px 12px;
}
.submit-button{
    top: 14px;
    right: 14px;
    position: absolute;
    margin-bottom: 0;
}
}
@media (min-width: 992px){
.container{
    width: 960px;
}
}
@media (min-width: 1200px){
.container{
    width: 1170px;
}
}
/* RESPONSIVE CSS END */

*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}

.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}