Question

这是我的代码。我还是CSS的初学者这就是为什么我问这个问题，请帮助我，我已经尝试了一切。问题是，当我向标题添加填充时，似乎它将标题中的所有元素推向右侧我在这里错过了什么吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>To do list app</title>

    <style type="text/css">
        header {
    width: 100%;
    height: 80px;
    position: fixed;
    padding: 15px;
    top: 0;
    left: 0;
    z-index: 5;
    background: #25b99a;
    box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

header input {
    width: 100%;
    height: 50px;
    float: left;
    background: rgba(255,255,255, 0.2);
    border-radius: 5px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border: 0px;
    box-shadow: none;
    outline: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

    </style>
</head>
<body>

    <header>
    <input type="text" placeholder="Enter an activity..">
    </header>

</body>
</html>

Answer 1

使用以下方法从标题宽度中减去左右填充：

width: calc(100vw - 30px);

以下是片段：

＆＃13;

header {
    width: calc(100vw - 30px);
    height: 80px;
    position: fixed;
    padding: 15px;
    top: 0;
    left: 0;
    z-index: 5;
    background: #25b99a;
    box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

header input {
    width: 100%;
    height: 50px;
    float: left;
    background: rgba(255,255,255, 0.2);
    border-radius: 5px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border: 0px;
    box-shadow: none;
    outline: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

＆＃13;

    <header>
    <input type="text" placeholder="Enter an activity..">
    </header>

＆＃13;

Answer 2

问题是当你添加填充时，你打破100％的宽度并添加一个填充，使其100％+ 2 *填充。即使边框不存在问题仍然存在，只有你没有注意到它，尝试输入尽可能多的字母，所以输入填满并注意到右边仍然是坏的。

仅限现代浏览器对于标题：

display: flex;

输入：

align-items: stretch;

Flex展示应该考虑到所有因素。

Answer 3

如果您不需要侧面，您可以在上下设置填充。并且你的标题正在移动，因为它必须向右移动15px以为其中的填充腾出空间。

padding-top:15px
padding-down:15px

Answer 4

您可以尝试在标题中添加box-sizing: border-box样式。这将意味着标题的宽度（100％）计算包括填充。最终结果是宽度+填充将加起来达到100％。所有浏览器都支持box-sizing样式。

向标题添加填充将标题推向右侧，解决方案？

4 个答案: