html - 为什么我的按钮标签不能像其他输入标签一样居中？

Question

<分区>

Answer 1

Based on my calculation, the margin on both sides is supposed to make the two tags perfectly centred in the div

您的计算不完全正确，您所做的是 200+9+10+50+9 即 278，这似乎适合元素宽度 278。但是您没有包括的是由新行 ( Why does the browser renders a newline as space? ) 引入的两个 input 元素之间的空格。

如果您删除该新行，它将起作用:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
}

#input-search {
  width: 200px;
  height: 30px;
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
}

#btn {
  height: 30px;
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}

<div class="search-box">
  <input type="text" id="input-search" placeholder="search"><!--
  --><input type="button" value="GO" id="btn">
</div>

但为避免此类问题，您可能希望使用 display:flex 而不是手动计算元素的正确宽度。

• 将 .search-box 的display 设置为 flex。
• 删除两个 input 元素的 width 和 height，flex 将处理它。
• 不是将 width 设置为 #btn，而是设置所需的 padding。
• 在 #input-search 上使用 flex: 1 1 auto; 使其拉伸(stretch)并使用可用尺寸。

这样你可以改变你的.search-box的width而不需要改变输入元素的宽度，你可以更新字体大小按钮和文本。您甚至可以通过将 with 更改为 max-width 来使 .search-box 响应。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
}

#input-search {
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  padding-left: 15px;
  padding-right: 15px;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}

<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

为了进一步改进 CSS，我将从 input 元素中删除 margin，并将其更改为 上的 padding .search-box 和 gap。对于 #btn 的 padding 我将使用 em 而不是 px 单位。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
  padding: 9px;
  gap: 10px;
}

#input-search {
  border: 1px solid #DCDCDC;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  padding-left: 1.2em;
  padding-right: 1.2em;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}

<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>