输入字段范围不正常

Question

我的目标输出与吹像一样。

我的CSS和HTML：

internal static class Extensions
{
    public static IEnumerable<dynamic> Transform(this IEnumerable<ChartSeries> data)
    {
        foreach (var chartSeries in data)
        {
            var result = new ExpandoObject() as IDictionary<string, object>;
            result.Add(chartSeries.Person, chartSeries.Percent);
            yield return result;
        }
    }
}

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;
}

写完我的代码输入左侧显示正确但右侧未正确显示。从我的知识右侧需要显示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：如果您希望保留默认的盒子模型，可以使用计算的宽度来补偿填充：将width的{​​{1}}设置为header（小心）如果选择此选项，请保留calc(100% - 30px)周围的空格。）

Answer 2

此解决方案适合您。

    
    body{
    margin:0;
    padding:0;
}
header{
    height: 40px;
    display:block;
    background: #00A6E3;
    border-radius: 0 0 10px 10px;
    padding:15px 15px 15px 15px;
    box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
    z-index: 5;
}
header .todoitem{
    height: 100%;
   width:100%;
   display:block;
    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>

Answer 3

你也可以这样做。

header {
  height: 70px;
  width: 100%;
 position:fixed;
  background: #00A6E3;
  top: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
  padding: 15px;
box-sizing:border-box;
 

}
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>

我使用了box-sizing:border-box所以p 添加包含在总宽度中，并增加了标题的高度，因此...主要问题是你的填充实际上增加了标题的宽度 - 所以标题宽度超过100％（100％+填充）。

有关盒子大小调整的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 4

header {
  height: 40px;
  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>

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>

Answer 5

尝试删除float：left，并将text-align：center添加到header，将text-align：left添加到.todoitem，然后将边距值添加到.todoitem以将其定位到所需位置。

Answer 6

padding:2px;和padding :15px 0; 不顺利，它永远不会。将宽度减小到98％或将填充添加为header { height: 40px; width: 100%; position: fixed; background: #00A6E3; top: 0; left: 0; border-radius: 0 0 10px 10px; padding: 15px 0; box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15); display: block; z-index: 5; }

this