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

Question

能否有人为我指出这个问题的解决方案呢？

HTML

<div class="container">
    <input type="text" class="left" />
    <button class="right">Some button</button>
</div>

CSS

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

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

.right { width: 100px; }

这是code pen的示例: http://codepen.io/be-codified/pen/qdRRBY

输入框应该可以被拉伸，按钮应该固定在右侧。

提前感谢您的帮助。

// 编辑

我不能使用表格标签，因为布局需要响应式。

- be-codified

---

我认为你想使用文本区域而不是输入框。 - jbutler483

它需要作为输入。 - be-codified

我可以问一下为什么吗？文本区域是用于文本的可调整输入框。您甚至可以使用 max-height 和 height 属性停止其垂直调整大小。带有文本区域的演示 - jbutler483

文本域是一个多行输入框。 - be-codified

也许我没有理解你想要什么。你是想要（a）通过拖放使你的div可以调整大小，还是（b）根据屏幕大小进行调整大小？ - jbutler483

Answer 1

我把输入框的宽度设为calc(100% - 110px)，并将按钮设置为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.
}

- Rvervuurt

---

谢谢，这是我的解决方案。 - be-codified

Answer 2

我建议将表单元素放入<div>中，不要更改其默认的显示属性，然后根据需要将左侧输入框设置为100％宽度。

.container {
  display: table;
  width: 100%;
  background-color: red;
}
.left, .right {
  display: table-cell;
}
.right {
  width: 100px;
}
.left input {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="left"><input type="text" /></div>
  <div class="right"><button>Some button</button></div>
</div>

事实上，左右两栏都可以具有动态宽度，因此右侧列始终基于按钮长度获得最小宽度。

.container {
  display: table;
  width: 100%;
  background-color: red;
}
.left, .right {
  display: table-cell;
  white-space: nowrap;
}
.left {
  width: 100%;
}
.left input {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="left"><input type="text" /></div>
  <div class="right"><button>Some button</button></div>
</div>

- Stickers

---

感谢您的努力。 - be-codified

@Zigson 请阅读此内容：display:table-cell not working on an input element。 - Stickers

@Zigson 很有趣，它在Firefox上不起作用，但这是有道理的，因为 table-cell 的行为类似于 <td>，但 <input> 是一个自闭合标签，不能包含任何内容。 - Stickers

它在Firefox上不起作用？那么，额外的<div>就是它了！ :) - be-codified

@Zigson 不，它不起作用，当然将其包装在<div>中可以起作用，这就是我在上面的答案中建议的。 - Stickers

Answer 3

这是完全响应式的解决方案。

HTML

   <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>

CSS

/* 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;
}

https://jsfiddle.net/bL3wgrv9/

- Rahul