html - Flexbox SVG 不与其他元素内联

Question

我正在尝试对齐 svg 和一些由 flexbox 容器包装的内联 li 元素。出于某种原因，最后的 svgs 没有与其他 svgs 内联。 CSS:

.container{
    margin-left:20px;
    display:inline-flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;

}

.logo{
    width: auto;
    fill:orange;
    height: 57px;
}
.menu{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: space-between;
}
.menu li {
    padding:30px;
    list-style: none;
}
.secondmenu{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
}

.secondmenu  svg{
    padding: 10px;

    width: 3%;
  }

这是带有 html 的代码笔:

https://codepen.io/anon/pen/eboMOQ

Answer 1

到此为止，lastpeony4 稍微清理了您的代码，这应该让您开始了。 https://codepen.io/anon/pen/xmeWBO?editors=1100

.container{
    margin-left:20px;
    display:flex;
    flex-direction: row;
}
.logo{
    width: auto;
    fill:orange;
    height: 57px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  display: flex;
  flex-grow: 1;

}

ul li {
  padding: 1rem
}

.svg-container {
  display: flex;
}

.svg-container svg {
  height: 20px;
    padding: 1.8rem 1rem;
}