Question

你如何在html或css中编码设计一个顶部栏，可能背景颜色为红色，会延伸到屏幕大小？

例如，这就是我通常做的事情，但我无法实现我想要的目标。以下是我在css中做的例子。

#topbar {
        background-color:red;
        width:1400px;
        height:50px;
}

在这种情况下，红色条会在左上角被切掉。我该怎么做html / css所以角落不会被切断？

Answer 1

试试这个

#topbar {
    background-color:red;
    width:100%;
    height:50px;
}
* {
  margin:0px;
  padding:0px;
}

如果您将以像素为单位给出宽度，则它将无法在所有屏幕中使用。最好使用％宽度，以便根据屏幕宽度自动调整。

Answer 2

试试这个

 *{
    margin:0;
    padding:0;

}
#topbar {
        background-color:red;
        width:100%;
        height:50px;
}

Answer 3

如果我理解正确的话...... HTML

<div id="header">
  <div id="nav>
  </div>
</div>

的CSS

html, body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  background: red;
}
#nav {
  margin-left: auto;
  margin-right: auto;
}