h1和nav在同一行

Question

I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code

  .header{ background-color: #00001a; height: 40px; width: 100%; } ul{ list-style-type: none; } .header h1{ float: left; color: #ffffff; font-size: 15px; display: inline-block; } .nav li{ float: right; display: inline-block; color: #ffffff; } 

 <div class="header"> <div class="nav"> <h1>EaTogeter</h1> <ul> <li>home</li> <li>About</li> <li>Couples</li> <li>family</li> </ul> </div> </div> <div class="Maincontent"> <div class="container"> <h2>Try It</h2 <p>Today's Try It Recipe!<p> </div> </div> 

Answer 1

display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.

 .header { background-color: #00001a; padding: 0 1em; } .nav { display: flex; justify-content: space-between; align-items: center; } ul { list-style-type: none; } .header h1 { color: #ffffff; font-size: 15px; } .nav li { color: #ffffff; display: inline-block; } 

 <div class="header"> <div class="nav"> <h1>EaTogeter</h1> <ul> <li>home</li> <li>About</li> <li>Couples</li> <li>family</li> </ul> </div> </div> 

Answer 2

Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.

 header { background-color: #00001a; padding: 0px 10px; box-sizing: border-box; } h1 { color: white; margin: 5px 0; padding: 0; } .left { float: left; } .right { float: right; } .clear { clear: both; } ul { list-style-type: none; } ul li { display: inline-block; color: white; margin-left: 20px; } 

 <header> <div class="left"> <h1> EaTogether </h1> </div> <div class="right"> <ul> <li>Home</li> <li>About</li> <li>Couples</li> <li>Family</li> </ul> </div> <div class="clear"></div> </header> 

Note: I've changed "Togeter" to "Together", assuming it was a typo.

Answer 3

I am not sure if you want this thing but I just gave a try,

For this, set float:right to ul element and not on li elements. Since you want to align h1 and li content set line-height to 0.5 for ul element

please check this fiddle: https://jsfiddle.net/hz0104mp/

<div class="header">
       <div class="nav">
        <h1>EaTogeter</h1>
        <ul>
         <li>home</li>
         <li>About</li>
         <li>Couples</li>
         <li>family</li>
        </ul>   
        </div>
       </div>
        <div class="Maincontent">
          <div class="container">
          <h2>Try It</h2>
          <p>Today's Try It Recipe!<p>
         </div>
       </div>


.header{
        background-color: #00001a;
        height: 40px;
        width: 100%;
       }

        ul{
         list-style-type: none;
        }

        .header h1{
         color: #ffffff;
         font-size: 15px;
         display: inline-block;
        }

       .nav ul{
          float:right;
          line-height:0.5;
        }

       .nav li{
        display: inline-block;
        color: #ffffff;
       }

Answer 4

I like the flexbox method mentioned by @Michael Coker but here's a solution using floats as the OP attempted to do.

You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.

On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.

The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li .

I rectified this by floating the ul instead of individual li and setting those to display: inline; . Floating the li to the left would also work.

 header { padding: 0 0.5rem; height: 40px; color: #ffffff; background-color: #00001a; } ul, li { margin: 0; padding: 0; list-style: none; } header h1 { margin: 0; font-size: 15px; display: inline-block; } header h1, .nav li { line-height: 40px; } .nav { float: right; } .nav li { padding: 0 0 0 0.25rem; display: inline; } 

 <header> <h1>Eat Together</h1> <ul class="nav"> <li>Home</li> <li>About</li> <li>Couples</li> <li>Family</li> </ul> </header> <main> <h2>Try It</h2> <p>Today's Try It Recipe!<p> </main> 

Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty" ).

Answer 5

删除float: left .nav li float: left ，然后添加到ul 。