stackoom
  简体   繁体   中英

How can I change the background-color in between last li and ul?

 原文  2017-01-01 00:04:31  3   2    html/ css/ html-lists

Question

点击这里查看图片！

How to change the background-color as you can see in above image? I want to change color after last li and in ul . I do not want to add a new li , just set the overall background-color for ul , and change the background color as mentioned in the image. 

 * { margin: 0; padding: 0; } body { font: 76% Verdana; line-height: 1.4em; } a { text-decoration: none; font-weight: bold; color: #467aa7; } a:hover { color: #80B0DA; text-decoration: none; } /* Header */ .header { height: 110px; width: 758px; color: white; margin: 0 1px; background-color: #4279A5; } .header h1 { font-size: 2.4em; font-weight:normal; padding: 35px 0 0 20px; } .header h2 { font-size: 1.4em; font-weight:normal; margin: 10px 0 0 40px; } /* Navigation */ .nav { width: 758px; height: 2.2em; line-height: 2.06em; margin: 0 1px; background-color: #4279A5; } .nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid white; } .nav li { float: left; border-right: 1px solid white; list-style-type: none; } .nav li a { text-decoration: none; color: white; font-size: x-small; padding: 5px 10px 10px 5px; } .nav .selected, .nav li:hover { background-color: #80B0DA; } 
 <!DOCTYPE html> <html> <head> <title>Hello</title> <link rel="stylesheet" type="text/css" href="kk.css"> </head> <body> <div class="header"> <h1>Hello World</h1> <h2>Slogan!</h2> </div> <div class="nav"> <ul> <li class="selected"><a href="#first">FIRST PAGE</a></li> <li><a href="#second">SECOND</a></li> <li><a href="#third">THIRD</a></li> <li><a href="#forth">FORTH</a></li> <li><a href="#fifth">FIFTH</a></li> <li><a href="#last">AND THE LAST ONE</a></li> </ul> </div> </body> </html>

2 answers

solution1
 0  2017-01-01 00:47:40

I understand you want to do something like this: 

li:last-child{
  background-color: #80B0DA;
}

It is not the best answer but you can solve the problem from here: 

 * { margin: 0; padding: 0; } body { font: 76% Verdana; line-height: 1.4em; } a { text-decoration: none; font-weight: bold; color: #467aa7; } a:hover { color: #80B0DA; text-decoration: none; } /* Header */ .header { height: 110px; width: 758px; color: white; margin: 0 1px; background-color: #4279A5; } .header h1 { font-size: 2.4em; font-weight:normal; padding: 35px 0 0 20px; } .header h2 { font-size: 1.4em; font-weight:normal; margin: 10px 0 0 40px; } /* Navigation */ .nav { width: 758px; height: 2.2em; line-height: 2.06em; margin: 0 1px; background-color: #4279A5; } .nav ul { width: 758px; list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid white; } li:last-child { width: 332px; height: calc(100%-20px); background-color: #80B0DA; } .nav li { float: left; border-right: 1px solid white; list-style-type: none; } .nav li a { text-decoration: none; color: white; font-size: x-small; padding: 5px 10px 10px 5px; } .nav .selected, .nav li:hover { background-color: #80B0DA; } 
 <!DOCTYPE html> <html> <head> <title>Hello</title> <link rel="stylesheet" type="text/css" href="kk.css"> </head> <body> <div class="header"> <h1>Hello World</h1> <h2>Slogan!</h2> </div> <div class="nav"> <ul> <li class="selected"><a href="#first">FIRST PAGE</a></li> <li><a href="#second">SECOND</a></li> <li><a href="#third">THIRD</a></li> <li><a href="#forth">FORTH</a></li> <li><a href="#fifth">FIFTH</a></li> <li><a href="#last">AND THE LAST ONE</a></li> <li><a></a></li> </ul> </div> </body> </html>

solution2
 0  2017-01-01 02:15:29

Add a background-color to your .nav ul style (red, for example): 

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid white; 
    background-color: red;
}

And add this just before your .nav .selected, .nav li:hover style: 

.nav li:not(.selected) {
    background-color: #4279A5;
}


EXAMPLE: 

 * { margin: 0; padding: 0; } body { font: 76% Verdana; line-height: 1.4em; } a { text-decoration: none; font-weight: bold; color: #467aa7; } a:hover { color: #80B0DA; text-decoration: none; } /* Header */ .header { height: 110px; width: 758px; color: white; margin: 0 1px; background-color: #4279A5; } .header h1 { font-size: 2.4em; font-weight:normal; padding: 35px 0 0 20px; } .header h2 { font-size: 1.4em; font-weight:normal; margin: 10px 0 0 40px; } /* Navigation */ .nav { width: 758px; height: 2.2em; line-height: 2.06em; margin: 0 1px; background-color: #4279A5; } .nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid white; background-color: red; } .nav li { float: left; border-right: 1px solid white; list-style-type: none; } .nav li a { text-decoration: none; color: white; font-size: x-small; padding: 5px 10px 10px 5px; } .nav li:not(.selected) { background-color: #4279A5; } .nav .selected, .nav li:hover { background-color: #80B0DA; } 
 <!DOCTYPE html> <html> <head> <title>Hello</title> <link rel="stylesheet" type="text/css" href="kk.css"> </head> <body> <div class="header"> <h1>Hello World</h1> <h2>Slogan!</h2> </div> <div class="nav"> <ul> <li class="selected"><a href="#first">FIRST PAGE</a></li> <li><a href="#second">SECOND</a></li> <li><a href="#third">THIRD</a></li> <li><a href="#forth">FORTH</a></li> <li><a href="#fifth">FIFTH</a></li> <li><a href="#last">AND THE LAST ONE</a></li> </ul> </div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I make my background-color fill entire width of div when applied to a `ul li`? How can I change the background-color to transparent on an onmouseout event? How can I dynamically change the background-color html? How to change background-color of an li tag with hover? How can I change the background-color of a div inside a link How can I change the space between <ul> and <li> elements? How to change background color of ul li elements in autosuggest react component? How can I make a specific div with transparent background-color over a div with black background-color How do I change the nav ul li color? How can I change the background-color of a jqm slider independent from the header (Live code included)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM