html - 将两件事彼此并排放置标题

This question already has answers here:

Position a div container on the right side

（5个答案）



divs side by side with space between

（1个答案）



Three divs side by side with spacing in between

（5个答案）


5个月前关闭。





我需要在左侧显示文本，紧接着是名称，在右侧显示列表。

body {
  font-family: nunito;
}

.mainmaneheader {
  float: left;
  position: relative;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.purplebox {
  background-color: #ba68c8;
}

<header>
  <h1 class="mainnameheader">NAME</h1>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</header>

*我知道这是一个普遍的问题，但是环顾四周后我找不到答案。

最佳答案

尝试提供标题display: flex;和height，以便您可以设置line-height并使文本对齐！之后，您可以给ul width: 100%;使其占据允许的整个宽度！然后，您可以给ul一个text-align: right，这样它就在右边！

    * {
        margin: 0;
        padding: 0;
    }
    header {
        display: flex;
        height: 50px;
        line-height: 50px;
        padding: 20px;
        background-color: #fff1cc;
    }

    ul {
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: right;
    }

    li {
        list-style: none;
        display: inline;
    }

<header>
    <h1 class="mainmaneheader">NAME</h1>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</header>

关于html - 将两件事彼此并排放置标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60598962/