CSS无法对齐<li>

Question

I want to set list in header section but everytime I do, my home, about and blog goes out of background color or background color minimize. I dont know how much you can understand me what i want to say if you want i can put picture where i want list to be.

 header { background: #304852; color: #ffffff; border-bottom: #585858 3px solid; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 40px; } header ul { margin: 0; padding: 0; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header nav { float: right; } 

 <header> <div id="logo"> <img src="http://lorempixel.com/120/60/" width="120px" height="60px"> </div> <nav> <ul> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">HOME</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">ABOUT</a></li> <li> <a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">BLOG</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">CONTACT</a></li> </ul> </nav> </header> 

Answer 1

The best course of action would be to remove the float from your header li and header nav CSS selectors, and instead apply a simple text-align to header nav .

See the attached code for reference.

 header{ background: #304852; color: #ffffff; border-bottom: #585858 3px solid; } header a{ color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 40px; } header ul{ margin: 0; padding: 0; } header li{ /* float: left; */ display: inline-block; padding: 0 20px 0 20px; } header nav{ /* float: right; */ text-align: right; } 

 <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> 

Answer 2

Two changes necessary:

1.) float: left; on #logo , since other wise it's a block element and takes the whole width.

2.) overflow: auto on header , since it then only contains floated elements and wouldn't keep the background color.

 header { background: #304852; color: #ffffff; border-bottom: #585858 3px solid; overflow: auto; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 24px; } #logo { float: left; } header ul { margin: 0; padding: 0; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header nav { float: right; } 

 <header> <div id="logo"> <img src="http://lorempixel.com/120/60/" width="120px" height="60px"> </div> <nav> <ul> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">HOME</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">ABOUT</a></li> <li> <a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">BLOG</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">CONTACT</a></li> </ul> </nav> </header>