如何将这些锚标签移动到右侧？

Question

如何使用display: flex将锚标记移动到右侧？在margin-left: auto上使用li a无效。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
  /* added */
  align-items: center;
  /* added; vertical alignment */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

边缘应该应用于flex儿童，我相信这是第二个li

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
li:nth-child(2) {
  margin-left: auto;
}

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

保证金也可以从第一个li

实现

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
li:first-of-type {
  margin-right: auto;
}

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

如果只是关于装饰但与布局交互

，可以通过伪元素插入徽标

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* update */
ul:before {
content:url(http://dummyimage.com/75x75&text=logo);
margin-right:auto;
}

<div id="navbar">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

Answer 2

另一种解决方案是制作第一个元素flex:1：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  display: flex;
  /* added */
  align-items: center;
  /* added; vertical alignment */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}

li a {
  color: white;
  vertical-align: middle;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li:first-child {
  flex: 1;
}

＆＃13;

<div id="navbar">
  <ul>
    <li><img src="img/logo.png" width="75" height="75"></li>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MY WORK</a></li>
    <li><a href="#">HIRE ME</a></li>
    <li><a href="#">PROJECTS</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将flex: auto添加到img，删除不必要的CSS规则和无序列表。

＆＃13;

＆＃13;

body {
  margin: 0;
}

nav {
  display: flex;
  align-items: center;
  background: black;
}

nav > span {
  flex: auto;
}

nav > span > img {
  vertical-align: middle;
}

nav > a {
  color: white;
  padding: 1rem;
  text-decoration: none;
}

nav > a:hover {
  background: gray;
}

＆＃13;

<nav>
  <span><img src="http://via.placeholder.com/75" alt width="75" height="75"></span>
  <a href="#">HOME</a>
  <a href="#">MY WORK</a>
  <a href="#">HIRE ME</a>
  <a href="#">PROJECTS</a>
</nav>

＆＃13;

＆＃13;

＆＃13;