在导航中显示彼此的链接

Question

我曾多次尝试float: right或display: inline-block，但它并不适合我。任何人都可以帮助我实现它吗？我想将我的导航显示在彼此旁边，如下所示。

我试着像上面提到的那样运行几个代码。但似乎需要你的帮助才能正常工作。

.menu {
  list-style-type: none;
  display: inline-block;
  padding: 0 11px;
  font-size: 1.5rem;
  margin-right: 6rem;
  font-family: "Montserrat", sans-serif;
}

ul li .link {
  position: relative;
  display: inline-block;
}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
}

.head {
  position: relative;
  text-align: right;
  width: 100%;
  padding: 22px 48px 25px;
  border-bottom: 1px solid #f5f5f5;
 }

 div .logopix {
  height: 5rem;
  display: inline-block;
  font-size: 0;
  top: 1.1rem;
  left: 37px;
  position: absolute;


 }

<div class="head">
        <img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
        <ul class="menu">
          <li class="link"> <a href="#">About</a> </li>
          <li class="link"> <a href="#">Contact Us</a> </li>
        </ul>
      </div>

Answer 1

在

中添加css

.menu {
        display: flex;
    justify-content: flex-end;
    }

Answer 2

使用与inline-block相同的技术，在同一行显示li：

ul li {
  display: inline-block;
}

以下是代码：Codepen

Answer 3

您可以通过编写非常小的语义代码和样式来实现相同的要求。请检查以下代码。

语义HTML代码

<header class="header">
  <img src="http://via.placeholder.com/150x60"/>
  <nav class="navbar">
    <a href="/about">About</a>
    <a href="/services">Services</a>
    <a href="/contact">Contact</a>
  </nav>
</header>  

CSS样式

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar a {
  padding-left: 10px;
  font-size: 20px;
}

查看演示：jsfiddle