Question

这是一个从练习中复制的代码，但我不知道为什么标题在视口的右边界之外设置了-30px（在视频教程中没有发生）。我尝试将30px应用于右边，但它从0开始计数，而不是我作为礼物获得的其他像素。

Internet尚未显示任何答案。

请帮助。

如此处所示，它在右侧增加了30px，因此标题（宽度为100％）位于视口之外： snapshot

@charset "UTF-8";
header {
  width: 100%;
  height: 88px;
  position: fixed;
  right: auto;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 5;
  background: #FF825C;
  box-shadow: 0px 2px 4px #EA6044;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

header input {
  width: 100%;
  height: 50px;
  float: left;
  background: #FFA473;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 0px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>ToDoList app</title>
  <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>

<body>
  <header>
    <input type="text" placeholder="Enter an activity...">
    <button type="button" name="button"></button>
  </header>
</body>

</html>

Answer 1

发生这种情况是因为您为所有面都设置了填充。尝试只放右填充并检查：

@charset "UTF-8";
header {
    width: 98.5%;
    height: 88px;
    position: fixed;
    padding: 15px;
    top: 0;
    left: 0;
    z-index: 1;
    background: #FF825C;
    box-shadow: 0px 2px 4px #EA6044;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
  }

  header input {
    width: 99.5%;
    height:50px;
    float: left;
    background: #FFA473;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 0px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ToDoList app</title>
    <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  </head>
  <body>
    <header>
      <input type="text" placeholder="Enter an activity..."/>      
      <button type="button" name="button"></button>
    </header>
  </body>
</html>

我还有30px的位置

1 个答案: