style not applying to child elements
Question
I've applied a background-color to a container but a <ul> defined inside the container doesn't seem to be applying the background color. Any thoughts to why? Also, is there a way to apply even spacing to the <ul> items so they span the width of the container evenly without applying padding?
#smedia-container { max-width: 302px; max-height: 110px; text-align: center; background-color: #fbf4e8; } .smedia-header { background-color: #b90021; color: #000; min-height: 32px; } .smedia-icons { text-align: justify; width: 100%; } ul.smedia-icons li { float: left; display: inline-block; text-decoration: none; } .smedia-icons li a { text-decoration: none; }
<!DOCTYPE html> <html lang="en"> <head> <title>social media bar</title> <link rel="stylesheet" type="text/css" href="smedia-bar.css"> </head> <body> <div id="smedia-container"> <div class="smedia-header"> <span>Social Media</span> </div> <span> Follow Us </span> <ul class="smedia-icons"> <li><a href="#"><img src="some.png" alt=" "> </a> </li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> </ul> </div> <!--container--> </body> </html>
2 answers
solution1
1 2015-04-03 14:58:10
Since you float the list items, the list essentially collapses so the parent acts like it's not there. You can restore the behavior you're after by adding overflow:auto to the container's CSS:
#smedia-container { max-width: 302px; max-height: 110px; text-align: center; background-color: #fbf4e8; overflow:auto; } .smedia-header { background-color: #b90021; color: #000; min-height: 32px; } .smedia-icons { text-align: justify; width: 100%; } ul.smedia-icons li { float: left; display: inline-block; text-decoration: none; } .smedia-icons li a { text-decoration: none; }
<!DOCTYPE html> <html lang="en"> <head> <title>social media bar</title> <link rel="stylesheet" type="text/css" href="smedia-bar.css"> </head> <body> <div id="smedia-container"> <div class="smedia-header"> <span>Social Media</span> </div> <span> Follow Us </span> <ul class="smedia-icons"> <li><a href="#"><img src="some.png" alt=" "> </a> </li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> <li><a href="#"><img src="some.png" alt=" "></a></li> </ul> </div> <!--container--> </body> </html>
solution2
0 2015-04-03 15:14:31
This will work:
#smedia-container {
overflow: auto;
max-width: 302px;
max-height: 110px;
text-align: center;
background-color: #fbf4e8;
}
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.