Question

我目前在标题的同一行有一个标题1和标识，现在我想要标题的背景颜色。理想情况下，我希望它也可以在导航栏下面。我遇到的问题是颜色不会像我想象的那样填满页面的顶部。它仅涵盖标题，并且还覆盖同一行上的徽标。

如何阻止颜色覆盖图像，以及如何将颜色从页面顶部扩散到导航栏下方。

HTML：

＆＃13;

decoded

＆＃13;

.header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}

＆＃13;

编辑：这就是我所说的徽标背景颜色：

Answer 1

我将HTML标头标签交换到正文中。你的身体标签是你所有的html减去带有你头衔的头标签的地方。没什么大不了的，因为它很好，只是一个最好的做法。我还改为你的标题img的css有一个z-index，它将图像放在h1标签的顶部，你的h1标签的z-index为-100，总是落在后面。

希望这有帮助。

＆＃13;

.header img {
  float: left;
  background: #555;
  z-index: 100; /* added */
  width: 100px; /* added */
}

.header h1 {
  z-index: -1; /* added */
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
  <header>
    <div class="header">
      <img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg" 
       alt="logo"/>
      <h1> The Clay Oven Pizzeria</h1>
    </div>
    <br><br>
    <div class="nav">
      <ul>
        <li><a class="active" href="#index"> Home </li>
        <li><a href="#menu">Menu</li>
        <li><a href="#about">About</li>
        <li><a href="#about">Contact Us</li>
        <li><a href="#signup">Sign Up</li>
      </ul>
    </div>
  </header>
</body>
</html>

＆＃13;

Answer 2

＆＃13;

max-width: 100%;
height: auto;

＆＃13;

  .header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;

}

.nav{
	width: 95%;
	margin: auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	text-align: center;
}

.nav li {
	font-family: "Lucida Sans Typewriter",Georgia,Arial;
	font-size: 16px;
	display: inline;
	height: 40px;
	width: 19.925%;
    float: left;
}

.nav li a {
    display: block;
    color: white;
    text-decoration: none;
}

.nav li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

.nav li:last-child{
	border-right: none;
}

＆＃13;

Answer 3

这是你期待的吗？

您看到标头和导航栏之间存在差距 - 这是因为function change_price( $price ) { $price = floatval($price) * 2; return $price; } add_filter( 'price_format', 'change_price', 10, 1 );内的h1默认为header，请将其删除，改为margin。还可以在padding之后卸载br。将您的header .header h1更改为

css

阻止颜色覆盖图像是什么意思？

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  padding: 20px 0 20px 40%;
  background-color:#D3D3D3;
  margin: 0;
}

.header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  padding: 20px 0 20px 40%;
  background-color:#D3D3D3;
  margin: 0;
}
.headerContainer {
  background-color:#D3D3D3;
  padding-bottom: 10px;
}

.nav{
	width: 95%;
	margin: auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	text-align: center;
}

.nav li {
	font-family: "Lucida Sans Typewriter",Georgia,Arial;
	font-size: 16px;
	display: inline;
	height: 40px;
	width: 19.925%;
    float: left;
}

.nav li a {
    display: block;
    color: white;
    text-decoration: none;
}

.nav li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

.nav li:last-child{
	border-right: none;
}

用背景颜色填充标题

3 个答案: