为什么我的“文本周围”区域采用整个页面的颜色而不是导航栏的颜色？
[英]Why does my "around the text" area take the color of the whole page and not the color of the navbar?
问题描述
For some reason the area around the text has background color.
由于某种原因，文本周围的区域具有背景色。 It takes the color of the whole page (*) and not the color of the navigation bar.它采用整个页面的颜色 (*) 而不是导航栏的颜色。 I just want it to be pure text without any kind of padding or background color.我只希望它是没有任何填充或背景颜色的纯文本。 Thanks in advance!提前致谢！
*{ padding:0; margin:0; text-decoration: none; list-style-type: none; box-sizing: border-box; background-color: lightgray; } header{ display:flex; justify-content: space-between; align-items: center; padding:30px 5%; background-color: grey; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Title</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <div class="logo"> <h4>Paper</h4> </div> <nav> <ul class="nav-links"> <li><a class="cart" href="#">Cart</a></li> <li><a class="account" href="#">Account</a></li> </ul> </nav> </header> </body> </html>
2 个解决方案
解决方案1
1 2022-03-01 21:28:18
You need to remove background-color: lightgray from the您需要从中删除background-color: lightgray
`*{
padding:0;
margin:0;
text-decoration: none;
list-style-type: none;
box-sizing: border-box;
}`
(*) means every element should take this particular style. (*) 表示每个元素都应采用这种特定样式。 Or if you want your entire body to have that background color you could give only the navbar a certain background color and set it to important.或者，如果您希望整个身体都具有该背景色，您可以只给导航栏一个特定的背景色并将其设置为重要。 Better still its best to not give every element that background color in order to stop future problems or confusion.更好的是，最好不要为每个元素提供背景颜色，以防止将来出现问题或混淆。 Create a div and give that the style.创建一个 div 并为其赋予样式。 The div would contain every other thing except for the navbar. div 将包含除导航栏之外的所有其他内容。 Do it this way:这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header><nav style='background-color:'red'>
<div class="logo">
<h4>Paper</h4>
</div>
<ul class="nav-links">
<li><a class="cart" href="#">Cart</a></li>
<li><a class="account" href="#">Account</a></li>
</ul>
</nav>
</header>
<div class='container' style='background-color: lightgray'></div>
</body>
</html>
解决方案2
0 2022-03-01 21:29:53
Avoid using the * selector except when really necessary.除非确实需要，否则避免使用 * 选择器。 Use styles that apply to selectors that match elements.使用适用于匹配元素的选择器的 styles。
Try this css code:试试这个 css 代码：
*, *::before, *::after { box-sizing: border-box; } body { padding:0; margin:0; background-color: lightgray; } a { text-decoration: none; } header{ display:flex; justify-content: space-between; align-items: center; padding:30px 5%; background-color: grey; } ul { list-style: none; padding: 0; margin: 0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Title</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <div class="logo"> <h4>Paper</h4> </div> <nav> <ul class="nav-links"> <li><a class="cart" href="#">Cart</a></li> <li><a class="account" href="#">Account</a></li> </ul> </nav> </header> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.