Question

如何使输入元素100％宽度可用？那么，100％宽度减去同一行上任何其他元素的宽度（不知道这些元素的宽度）？

＆＃13;

.bg {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 25px;
 }
input {
  width: 100%;
  padding: 0.4em;
  height: 25px;
  border: 1px solid #ccc;
}
.button {
  height: 25px;
  padding: 0.4em;
  background: #ccc;
  border: 1px solid #ccc;
  text-decoration: none;
 }

＆＃13;

<div class="bg">
  
  <input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>
  
 </div>

<div class="bg">
  
  <input type="text" placeholder="100% width" />
  
 </div>

＆＃13;

Answer 1

有两种方法：

使用flexbox，在display:flex（.bg用于演示）和.bg2（或仅flex:1）{{1}中应用flex-grow:1 }}

＆＃13;

input

＆＃13;

.bg {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 25px;
}
.bg2 {
  display: flex;
  border: solid red
}
.bg2 input {
  flex: 1;
}
input {
  width: 100%;
  padding: 0.4em;
  height: 25px;
  border: 1px solid #ccc;
}
.button {
  height: 25px;
  padding: 0.4em;
  background: #ccc;
  border: 1px solid #ccc;
  text-decoration: none;
}

＆＃13;

对于旧版本的IE，请使用CSS表格

＆＃13;

<div class="bg bg2">

  <input type="text" placeholder="100% width - button" /><a class="button" href="#">Click</a>

</div>

<div class="bg">

  <input type="text" placeholder="100% width" />

</div>

＆＃13;

* {
  box-sizing: border-box
}
.bg {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 25px;
  display: table;
  width: 100%;
}
input {
  display: table-cell;
  width: 100%;
  padding: 0.4em;
  height: 25px;
  border: 1px solid #ccc;
}
.button {
  display: table-cell;
  height: 25px;
  padding: 0.4em;
  background: #ccc;
  border: 1px solid #ccc;
  text-decoration: none;
}

＆＃13;

Answer 2

将display:flex添加到.bg - 类可行。 Flexbox尝试均匀分布它的子元素，但由于其中一个元素的宽度为100％且还有另一个子元素，因此宽度会被调整，因此所有元素都适合一行。 flex-attribute here有一个很好的指导原则。

CSS：100％宽度减去同一行上的元素

2 个答案: