Question

我有点困惑。我正在构建一个待办事项列表应用，我试图将标题设置为屏幕宽度的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;
}

Answer 1

您需要包含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>

100％宽度w / o父元素

1 个答案: