ヘッダーにパディングを追加すると、ヘッダーが右端にプッシュされますか？

これは私のコードです。私はまだ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;

Flexの表示は、アカウントにすべてを取る必要があります。

出典

2017-09-04 01:24:23 DanteTheSmith

サイドが不要な場合は、上下にパディングを設定できます。あなたのヘッダーは移動しています。なぜなら、パディングのためのスペースを残しておくためには、右に15ピクセル移動する必要があるからです。

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

出典

2017-09-04 12:12:33

埋め込みが存在しません。それは詰め物の底です – KCarnaille

ええ、私の悪い、ありがとう！ –

ヘッダーにパディングを追加すると、ヘッダーが右端にプッシュされますか？

答えて

関連する問題