將填充添加到標題將標題向右推，解決方案？

這是我的代碼。我還是一個初學者在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

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

將填充添加到標題將標題向右推，解決方案？

回答

相關問題