到目前为止，我的问题与页面风格有关。
我已经构建了一个内联导航栏，但是当我想更改其背景颜色时，它不会影响我想要着色的高度。我想知道我是否可以对此采取一些措施但又不能影响导航栏的大小或样式
图片(我使用 background-color : green; ):
body{
margin : 0;
padding : 0;
font-family : 'Arial',serif;
}
/*nav class */
.nav {
background-color : green;
color: white;
list-style : none;
text-align : right;
padding : 0px 0 0px 0;
}
/*A li tag in a .nav class*/
.nav > li {
display : inline-block;
padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
font-size: 14px;
}
/*a tag inside a li tag inside a .nav class*/
.nav > li > a {
text-decoration : none;
color: black;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
color : #c1c1c1;
}
.logo {
float : left;
padding-left : 25px;
}
.logo > .logo-image {
position: relative;
bottom : 8px;
width : 128px;
}
.banner {
width : 100%;
display : block;
}
.banner > .banner-image{
width : 100%;
display : block ;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DeckArts Graphics</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="nav">
<div class="logo">
<a class="logo-image" href="#home">
<img src="ZE.png" >
</a>
</div>
<li><a href="#Home">Home</a></li>
<li><a href="#Gallery">Gallery</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#About">About</a></li>
</ul>
<div class="banner">
<img class="banner-image" src="banner.jpg" >
</div>
</body>
</html>最佳答案
重置边距并向导航应用填充即可完成这项工作。
具体来说，
- 将
padding : 0px 0 0px 0;更改为padding : 10px 0 10px 0; - 添加
边距:0px。
下面是演示。
body{
margin : 0;
padding : 0;
font-family : 'Arial',serif;
}
/*nav class */
.nav {
background-color : green;
color: white;
list-style : none;
text-align : right;
padding : 10px 0 10px 0;
margin:0px;
}
/*A li tag in a .nav class*/
.nav > li {
display : inline-block;
padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
font-size: 14px;
}
/*a tag inside a li tag inside a .nav class*/
.nav > li > a {
text-decoration : none;
color: black;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
color : #c1c1c1;
}
.logo {
float : left;
padding-left : 25px;
}
.logo > .logo-image {
position: relative;
bottom : 8px;
width : 128px;
}
.banner {
width : 100%;
display : block;
}
.banner > .banner-image{
width : 100%;
display : block ;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DeckArts Graphics</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="nav">
<div class="logo">
<a class="logo-image" href="#home">
<img src="ZE.png" >
</a>
</div>
<li><a href="#Home">Home</a></li>
<li><a href="#Gallery">Gallery</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#About">About</a></li>
</ul>
<div class="banner">
<img class="banner-image" src="banner.jpg" >
</div>
</body>
</html>关于javascript - HTML/CSS - 导航栏拉伸(stretch)/填充背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38552599/