为什么输入和按钮没有占据div的整个宽度？

Question

我有以下HTML代码：

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

这是一个现场观看的小提琴： https://jsfiddle.net/nner02rk/2

我想要搜索输入并提交输入以获取.search-wrapper的整个宽度，或者在search-wrapper div内居中。

Answer 1

根据您希望如何分配元素宽度，有很多方法可以实现此目的。一种方法是设置按钮的宽度并使用calc使输入比指定的按钮宽度减少100％：

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: calc(100% - 55px);
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  width: 55px;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>

另一种方法是使用CSS表格布局：

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
  display: table;
}

.search-wrapper>span {
  display: table-cell;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  width: 100%;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 100%;
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <span><input type="search" class="search-query" placeholder="Search"></span>
    <span><input type="submit" value="search" class="search"></span>
    <div class="results"></div>
  </div>
</form>

Answer 2

将width属性添加到搜索查询和搜索类。这是一个例子：

.search-query{
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
padding-left: 3%;
width: 200px;
}

Answer 3

您可以移除position: absolute中的.search并将float: left添加到.search-query和.search。

.my-form {
  width: 100%
}

.search-wrapper {
  width: 50%;
  margin: 0 auto;
  background: #000;
}

.search-query {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 3%;
  float: left;
}

.search {
  background: #ea7d20;
  border-radius: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  float: left;
  /* position: absolute; */
}

<form method="GET" class="my-form">
  <div class="search-wrapper">
    <input type="search" class="search-query" placeholder="Search">
    <input type="submit" value="search" class="search">
    <div class="results"></div>
  </div>
</form>