親要素のない100％幅

私はちょっと混乱しています。私はTo-Do Listアプリケーションを構築していて、ヘッダーを画面幅の100％に設定しようとしています。私は正しいメタタグを持っていると思いますが、ヘッダを100％幅に設定すると、要素が画面の右側を越えて伸びています。私が間違っていることはありますか？親要素のない100％幅

<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Todo List App</title> 

<link rel="stylesheet" text="text/css" href="style.css"> 


</head> 
<body> 
    <header> 

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

     <button></button> 

    </header> 
</body> 
</html> 

@charset "UTF-8"; 

header { 
width: 100%; 
height: 80px; 
position: fixed; 
padding: 15px; 
top: 0px; 
left: 0px; 
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-top-left-radius: 5px; 
border-bottom-left-radius: 5px; 
border-top-right-radius: 25px; 
border-bottom-right-radius: 25px; 
border-radius: 5px; 
border: 0px; 
box-shadow: none; 
outline: none; 
}

出典

2017-11-16 Reese

を増やしてみてください '* {マージン：0;パディング：0; box-sizing：border-box} 'をCSSに追加します。 – LinkinTED

ヘッダーをフロートします。 – mheonyae

固定ヘッダーを浮動させることは意味がありません.... – LinkinTED

box-sizingプロパティを含める必要があります。

Info from MDN

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 80px; 
 
    position: fixed; 
 
    padding: 15px; 
 
    top: 0px; 
 
    left: 0px; 
 
    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-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-top-right-radius: 25px; 
 
    border-bottom-right-radius: 25px; 
 
    border-radius: 5px; 
 
    border: 0px; 
 
    box-shadow: none; 
 
    outline: none; 
 
}

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

出典

2017-11-16 14:36:31 sol

ありがとうございました！それは完璧に働いた。リンクもありがとう。それは完璧な意味合いがあります。 – Reese

答えて

関連する問題