Question

div {
  display: table;
  width: 900px;
}

input {
  width: calc(100% - 10px);
  display: table-cell;
}

section {
  display: table-cell;
  background: red;
}

<div>
  <input>
  <section><button>+ invite</button></section>
</div>

我希望input可以容纳所有剩余的地方。我正在尝试使用表来做到这一点。但是我不能摆脱“红色区域”。这是我想要摆脱的不必要的空间。

我希望输入范围更大，以便没有“红色区域”。

重要：将宽度设置为按钮的100％不是正确的解决方案。

这是密码笔链接https://codepen.io/CitizenOne/pen/QegBjQ

Answer 1

不要使用表格布局模型。 Flexbox功能更强大，更适合于此。

<section>似乎对此内容也没有正确的语义，所以我摆脱了它。

div {
  display: flex;
  outline: dotted black 5px;
  width: 500px; /* Reduced width to make it clearer in the small demo window */
}

input {
  flex: 1; 
  background: #afa;
  margin-right: 25px;
}

button {
  flex: 0;
  background: #faa;
}

<div>
  <input>
  <button>+ invite</button>
</div>

Answer 2

为按钮添加宽度。

div {
  display: inline-block;
  width: 900px;
}

input {
  width: calc(100% - 67px);
}

section {
  background: red;
}

<div>
    
  <input>
  <button>+ invite</button>
  
</div>

如何摆脱表中的“红色区域”？

2 个答案: