Question

我搜索了堆栈溢出和谷歌，并尝试了所有的建议，让我的h1和导航在同一行。我尝试了内联，内联块，将标题本身设置为100％。它只是没有对齐。最重要的是，当我将它设置为向左浮动时，我的li向后发布，因此位于列表顶部的主页现在位于外端而不是开头。这是我的代码

  .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;会将它们放在同一行，并将它们与可用空间分开。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将标题和导航放在自己的容器中。向左浮动，向右浮动，并确保之后清除它们。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

注意：我已经改变了＃34; Togeter＆＃34; to＆＃34; Together＆＃34 ;,假设这是一个错字。

Answer 3

我不确定你是否想要这个东西，但我只是试一试，

为此，将float：right设置为ul元素而不是li元素。由于您希望将h1和li内容设置为line-height为0.5，因为ul元素

请检查这个小提琴：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

我喜欢 @Michael Coker 提到的flexbox方法，但这是一个使用浮点数的解决方案，正如OP试图做的那样。

你是在正确的轨道上但可能是因为错误的原因而将一些CSS应用于错误的元素。

最重要的是，当我将它设置为向左浮动时，我的li向后发布，因此位于列表顶部的主页现在位于外端而不是开头。

在你分解之前，原因并不明显。发生这种情况的原因是因为float: right分别按照它们在标记中出现的顺序应用于每个元素，而不是作为一个整体。浏览器将尽可能向右移动 Home 。之后，它将尽可能向右移动关于。冲洗并重复任何其他li。

我通过浮动ul代替个人li并将其设置为display: inline;来纠正此问题。将li向左浮动也可以。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

请注意，我对您的标记采取了一些自由，以帮助提供一个示例，说明如何使用更少的标记来实现更多语义和实现（以及一些选择样式以使其更多＆＃34 ;漂亮＆＃34; ）

Answer 5

从float: left移除.nav li并添加到ul。

h1和导航在同一行

5 个答案: