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

这是我的代码。我还是一个初学者在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>

来源

2017-09-04 Mohammed Salman

你能提供填充代码吗？你想实现什么？ – jParmar

我想做一个标题，不通过屏幕的右侧 –

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

来源

2017-09-05 08:24:42

使用减去头宽度左右填充：

width: calc(100vw - 30px);

这里的片段：

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

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

来源

2017-09-04 01:13:41 jfeferman

问题是，当你添加填充你打破100％的宽度，并添加填充100％+ 2 *填充。即使边界不存在问题仍然存在，只有你没有注意到它，尝试输入尽可能多的字母，这样输入就会填满，并注意到右边的问题仍然是不好的。

在现代浏览器只对于标题：

display: flex;

对于输入：

align-items: stretch;

柔性显示屏应采取一切考虑。

来源

2017-09-04 01:24:23 DanteTheSmith

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

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

来源

2017-09-04 12:12:33

填充不存在。这是填充底部 – KCarnaille

是的，我的不好，谢谢！ –

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

回答

相关问题