html - 输入字段宽无法正常工作

Question

我的目标输出想要像打击图像一样。

我的 CSS 和 HTML:

header {
  height: 40px;
  width: 100%;
  position: fixed;
  background: #00A6E3;
  top: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
  display: block;
  z-index: 5;
}
header .todoitem {
  width: 100%;
  height: 100%;
  float: left;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  text-indent: 20px;
}
header input::-webkit-input-placeholder {
  color: #fff;
}

<header>
  <input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>

在编写我的代码输入后，左侧显示正确但右侧显示不正确。据我所知，右侧需要显示 15px 的填充。但是我不明白我的代码有什么问题。

Answer 1

两种可能的解决方案:

首先，您可以将 box-sizing: border-box 添加到您的样式中。事实上，您的 header 被设置为匹配其容器的整个宽度，然后在外部应用填充，这是 box 的默认行为-sizing，这使得填充超出了容器的限制。

更多阅读 on css-tricks.com .

您还需要调整高度以适应新的盒子模型(总高度现在包括内边距的高度)- 这是您更新后的代码:

header {
  box-sizing: border-box;
  height: 70px;
  width: 100%;
  position: fixed;
  background: #00A6E3;
  top: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
  display: block;
  z-index: 5;
}
header .todoitem {
  width: 100%;
  height: 100%;
  float: left;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  text-indent: 20px;
}
header input::-webkit-input-placeholder {
  color: #fff;
}

<header>
  <input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>

选项 2:如果您希望保留默认框模型，则可以使用计算出的宽度来补偿填充:将 header 的 width 设置为 calc(100% - 30px)(如果选择此选项，请注意保留 - 周围的空格)。