Flexbox SVG未与其他元素内联

Question

我正在尝试将svg和少量由flexbox容器包装的li元素内联。由于某些原因，最后一个svg不与其他内联。 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的codepen：

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

Answer 1

将整个菜单放在一行中：

您只需要将.container flex-wrap从wrap更改为nowrap

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

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

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

<div class="container">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 58">
 <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 </svg>
  <div class="menu">

    <li>
      <a>
    <span>SHOP</span>
</a>

    </li>
    <li>
      <a>
    <span>BUNDLES</span>
</a>
    </li>
    <li>
      <a>
    <span>EXPLORE</span>
    </a>
    </li>


  </div>




  <nav class="secondmenu">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.5,26.8c-0.4,0-0.8-0.2-1.1-0.6C13.1,24.1,6.7,14,6.7,9.5c-0.1-5,3.8-9.1,8.8-9.3c1.1,0,2.2,0.2,3.2,0.7
								L19.1,1c0.6,0.3,1.1,0.6,1.6,1l0.3,0.3c0.3,0.2,0.5,0.5,0.8,0.8c0.4,0.4,0.7,0.9,1,1.4L23,4.7c0.1,0.1,0.1,0.3,0.2,0.4
								s0.1,0.3,0.2,0.4l0.2,0.4l0.2,0.4c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.4c0.1,0.5,0.2,1.1,0.2,1.6l0,0v0.3c0,1.2-0.3,2.4-0.7,3.5
								c-0.2,0.5-0.4,1.1-0.6,1.6c-0.1,0.3-0.3,0.7-0.5,1l-0.3,0.7L21.8,17l-0.3,0.7c-0.4,0.7-0.7,1.4-1.1,2c-0.2,0.4-0.5,0.9-0.7,1.3
								L19,22.2l-0.3,0.6c-1.2,2-2,3.3-2.1,3.4C16.4,26.6,16,26.8,15.5,26.8L15.5,26.8z M15.5,2.8c-3.6,0.1-6.3,3.1-6.2,6.7
								c0,2.7,3.6,9.4,6.2,13.6l1-1.6l0.3-0.5c0.2-0.4,0.5-0.8,0.7-1.2s0.5-0.8,0.7-1.2c0.4-0.7,0.7-1.3,1-2c0.1-0.2,0.2-0.4,0.3-0.7
								l0.3-0.7l0.3-0.6c0.1-0.3,0.3-0.6,0.4-1c0.2-0.5,0.4-1,0.6-1.5c0.3-0.9,0.6-1.8,0.6-2.7V9.3c0-0.4,0-0.8-0.1-1.2
								c0-0.1,0-0.2-0.1-0.3s-0.1-0.4-0.2-0.6l-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3S21,6.4,21,6.3S20.9,6.1,20.8,6l-0.1-0.1
								c-0.2-0.4-0.5-0.7-0.7-1c-0.2-0.2-0.4-0.4-0.5-0.6l-0.2-0.2c-0.4-0.3-0.8-0.5-1.2-0.8l-0.3-0.1C17,2.9,16.3,2.8,15.5,2.8z
								 M15.5,13.4c-2.6-0.1-4.6-2.2-4.6-4.8c0,0,0,0,0,0c-0.1-2.6,2-4.7,4.5-4.8l0,0c2.6,0,4.7,2.2,4.7,4.8c0,0,0,0,0,0
								C20.1,11.1,18.1,13.3,15.5,13.4L15.5,13.4z M15.5,6.4c-1.2,0.1-2,1.1-2,2.2c-0.1,1.2,0.8,2.2,2,2.2c1.2-0.1,2.1-1.1,2-2.2
								C17.6,7.4,16.7,6.4,15.5,6.4C15.5,6.3,15.5,6.3,15.5,6.4L15.5,6.4z"></path>
							</svg>







    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.3,15.7c-0.3,0-0.5-0.1-0.8-0.2L2,6.5C1.4,6.1,1.3,5.3,1.7,4.7S2.9,4,3.5,4.4l11.9,8.5l12.1-8.5
								C28,4,28.8,4.1,29.2,4.7c0.4,0.6,0.3,1.4-0.3,1.8l0,0l-12.8,9C15.9,15.6,15.6,15.7,15.3,15.7z"></path>
							<path  d="M27.3,6.3c0.1,0,0.1,0.1,0.1,0.1V21c0,0.1-0.1,0.1-0.1,0.1H3.7c-0.1,0-0.1-0.1-0.1-0.1V6.5
								c0-0.1,0.1-0.1,0.1-0.1H27.3 M27.3,3.8H3.7C2.2,3.8,1,5,1,6.5V21c0,1.5,1.2,2.7,2.7,2.7h23.6c1.5,0,2.7-1.2,2.7-2.7V6.5
								C30,5,28.8,3.8,27.3,3.8L27.3,3.8z"></path>
							</svg>






    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M8.1,16.6c3,3,7.9,3,11,0s3-7.9,0-11s-7.9-3-11,0c-1.4,1.5-2.3,3.4-2.3,5.5C5.8,13.2,6.6,15.2,8.1,16.6z
							 M27.8,23.5c0.5,0.5,0.5,1.3,0,1.8c0,0,0,0,0,0c-0.5,0.5-1.3,0.5-1.8,0c0,0,0,0,0,0l-6-6c-4.5,3.5-11,2.7-14.6-1.8
							c-1.4-1.8-2.2-4.1-2.2-6.5c0-5.7,4.6-10.4,10.4-10.4C19.3,0.8,24,5.4,24,11.1c0,2.3-0.8,4.5-2.2,6.4L27.8,23.5z"></path>
						</svg>











    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
								<path  d="M24,18.8H10.3c-0.6,0-1.1-0.4-1.3-0.9L5.5,6.1L5.1,4.8c-0.3-1-1.1-1.6-2.1-1.7H1.3C0.6,3.2,0,2.7-0.1,2
									s0.5-1.3,1.2-1.4c0.1,0,0.2,0,0.2,0h1.6c2.1,0,3.9,1.4,4.6,3.4L8,5.2l0.3,1h21c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.3,1L30,14
									C29.6,16.9,27,19,24,18.8z M11.2,16.3H24c3.1,0,3.4-2.4,3.5-2.5l0.4-4.9H9L11.2,16.3z"></path>
								<path  d="M13.6,27c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2c0,0,0,0,0,0C16.7,25.6,15.3,27,13.6,27
									C13.6,27,13.6,27,13.6,27z M13.6,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0
									C14.2,23.5,13.9,23.2,13.6,23.2z"></path>
								<path  d="M25.3,27c-1.8,0-3.2-1.4-3.2-3.1c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1c0,0,0,0,0,0
									C28.4,25.6,27,27,25.3,27z M25.3,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6
									C25.9,23.5,25.6,23.2,25.3,23.2z"></path>
							</svg>







  </nav>


</div>

编辑评论：为了使svg大小相同，您需要为.logo和.secondmenu svg添加固定宽度：

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

.logo {
  width: auto;
  fill: orange;
  height: auto;
  min-width:75px;
  border:1px solid red;
  margin-top:-16px;
width: 35px;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
  border:1px solid gold;

}

.menu li {
  padding: 30px;
  list-style: none;
}

.secondmenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
border:1px solid navy;
}

.secondmenu svg {
  padding: 10px;
  width: 35px;
  
}

<div class="container">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 58">
 <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 </svg>
  <div class="menu">

    <li>
      <a>
    <span>SHOP</span>
</a>

    </li>
    <li>
      <a>
    <span>BUNDLES</span>
</a>
    </li>
    <li>
      <a>
    <span>EXPLORE</span>
    </a>
    </li>


  </div>




  <nav class="secondmenu">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.5,26.8c-0.4,0-0.8-0.2-1.1-0.6C13.1,24.1,6.7,14,6.7,9.5c-0.1-5,3.8-9.1,8.8-9.3c1.1,0,2.2,0.2,3.2,0.7
								L19.1,1c0.6,0.3,1.1,0.6,1.6,1l0.3,0.3c0.3,0.2,0.5,0.5,0.8,0.8c0.4,0.4,0.7,0.9,1,1.4L23,4.7c0.1,0.1,0.1,0.3,0.2,0.4
								s0.1,0.3,0.2,0.4l0.2,0.4l0.2,0.4c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.4c0.1,0.5,0.2,1.1,0.2,1.6l0,0v0.3c0,1.2-0.3,2.4-0.7,3.5
								c-0.2,0.5-0.4,1.1-0.6,1.6c-0.1,0.3-0.3,0.7-0.5,1l-0.3,0.7L21.8,17l-0.3,0.7c-0.4,0.7-0.7,1.4-1.1,2c-0.2,0.4-0.5,0.9-0.7,1.3
								L19,22.2l-0.3,0.6c-1.2,2-2,3.3-2.1,3.4C16.4,26.6,16,26.8,15.5,26.8L15.5,26.8z M15.5,2.8c-3.6,0.1-6.3,3.1-6.2,6.7
								c0,2.7,3.6,9.4,6.2,13.6l1-1.6l0.3-0.5c0.2-0.4,0.5-0.8,0.7-1.2s0.5-0.8,0.7-1.2c0.4-0.7,0.7-1.3,1-2c0.1-0.2,0.2-0.4,0.3-0.7
								l0.3-0.7l0.3-0.6c0.1-0.3,0.3-0.6,0.4-1c0.2-0.5,0.4-1,0.6-1.5c0.3-0.9,0.6-1.8,0.6-2.7V9.3c0-0.4,0-0.8-0.1-1.2
								c0-0.1,0-0.2-0.1-0.3s-0.1-0.4-0.2-0.6l-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3S21,6.4,21,6.3S20.9,6.1,20.8,6l-0.1-0.1
								c-0.2-0.4-0.5-0.7-0.7-1c-0.2-0.2-0.4-0.4-0.5-0.6l-0.2-0.2c-0.4-0.3-0.8-0.5-1.2-0.8l-0.3-0.1C17,2.9,16.3,2.8,15.5,2.8z
								 M15.5,13.4c-2.6-0.1-4.6-2.2-4.6-4.8c0,0,0,0,0,0c-0.1-2.6,2-4.7,4.5-4.8l0,0c2.6,0,4.7,2.2,4.7,4.8c0,0,0,0,0,0
								C20.1,11.1,18.1,13.3,15.5,13.4L15.5,13.4z M15.5,6.4c-1.2,0.1-2,1.1-2,2.2c-0.1,1.2,0.8,2.2,2,2.2c1.2-0.1,2.1-1.1,2-2.2
								C17.6,7.4,16.7,6.4,15.5,6.4C15.5,6.3,15.5,6.3,15.5,6.4L15.5,6.4z"></path>
							</svg>







    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.3,15.7c-0.3,0-0.5-0.1-0.8-0.2L2,6.5C1.4,6.1,1.3,5.3,1.7,4.7S2.9,4,3.5,4.4l11.9,8.5l12.1-8.5
								C28,4,28.8,4.1,29.2,4.7c0.4,0.6,0.3,1.4-0.3,1.8l0,0l-12.8,9C15.9,15.6,15.6,15.7,15.3,15.7z"></path>
							<path  d="M27.3,6.3c0.1,0,0.1,0.1,0.1,0.1V21c0,0.1-0.1,0.1-0.1,0.1H3.7c-0.1,0-0.1-0.1-0.1-0.1V6.5
								c0-0.1,0.1-0.1,0.1-0.1H27.3 M27.3,3.8H3.7C2.2,3.8,1,5,1,6.5V21c0,1.5,1.2,2.7,2.7,2.7h23.6c1.5,0,2.7-1.2,2.7-2.7V6.5
								C30,5,28.8,3.8,27.3,3.8L27.3,3.8z"></path>
							</svg>






    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M8.1,16.6c3,3,7.9,3,11,0s3-7.9,0-11s-7.9-3-11,0c-1.4,1.5-2.3,3.4-2.3,5.5C5.8,13.2,6.6,15.2,8.1,16.6z
							 M27.8,23.5c0.5,0.5,0.5,1.3,0,1.8c0,0,0,0,0,0c-0.5,0.5-1.3,0.5-1.8,0c0,0,0,0,0,0l-6-6c-4.5,3.5-11,2.7-14.6-1.8
							c-1.4-1.8-2.2-4.1-2.2-6.5c0-5.7,4.6-10.4,10.4-10.4C19.3,0.8,24,5.4,24,11.1c0,2.3-0.8,4.5-2.2,6.4L27.8,23.5z"></path>
						</svg>











    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
								<path  d="M24,18.8H10.3c-0.6,0-1.1-0.4-1.3-0.9L5.5,6.1L5.1,4.8c-0.3-1-1.1-1.6-2.1-1.7H1.3C0.6,3.2,0,2.7-0.1,2
									s0.5-1.3,1.2-1.4c0.1,0,0.2,0,0.2,0h1.6c2.1,0,3.9,1.4,4.6,3.4L8,5.2l0.3,1h21c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.3,1L30,14
									C29.6,16.9,27,19,24,18.8z M11.2,16.3H24c3.1,0,3.4-2.4,3.5-2.5l0.4-4.9H9L11.2,16.3z"></path>
								<path  d="M13.6,27c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2c0,0,0,0,0,0C16.7,25.6,15.3,27,13.6,27
									C13.6,27,13.6,27,13.6,27z M13.6,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0
									C14.2,23.5,13.9,23.2,13.6,23.2z"></path>
								<path  d="M25.3,27c-1.8,0-3.2-1.4-3.2-3.1c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1c0,0,0,0,0,0
									C28.4,25.6,27,27,25.3,27z M25.3,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6
									C25.9,23.5,25.6,23.2,25.3,23.2z"></path>
							</svg>







  </nav>


</div>

Answer 2

您在这里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;
}

Answer 3

您的主要问题是由于SVG上的视图框设置所致。使用视框时，应始终指定SVG的视口（宽度和高度）。确实需要使用这些设置才能获得所需的正确效果。我删除了第二个菜单项上的3％宽度和填充设置，因为它们也干扰了您的视图框。

对于您的容器flexbox，我将显示更改为flex而不是inline-flex，然后将您的秒菜单nav设置为auto的左边距-这将其保留在屏幕的右边。

运行该代码段并将其展开，以按照所需的方式查看第二个菜单行。因为图标的宽度是固定的，所以将容器设置为flex-wrap：nowrap可以防止物品被包裹，但是主图标会在较小的屏幕上缩小。

.container {
  margin-left: 20px;
  display: 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: 20px 30px;
  list-style: none;
}

.secondmenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: auto;
}

.secondmenu svg {
  margin-top: 15px;
}

<div class="container">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="2 -10 100 100">
 <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 </svg>
  <div class="menu">

    <li>
      <a>
        <span>SHOP</span>
      </a>

    </li>
    <li>
      <a>
        <span>BUNDLES</span>
      </a>
    </li>
    <li>
      <a>
        <span>EXPLORE</span>
      </a>
    </li>


  </div>


  <nav class="secondmenu">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M15.5,26.8c-0.4,0-0.8-0.2-1.1-0.6C13.1,24.1,6.7,14,6.7,9.5c-0.1-5,3.8-9.1,8.8-9.3c1.1,0,2.2,0.2,3.2,0.7
								L19.1,1c0.6,0.3,1.1,0.6,1.6,1l0.3,0.3c0.3,0.2,0.5,0.5,0.8,0.8c0.4,0.4,0.7,0.9,1,1.4L23,4.7c0.1,0.1,0.1,0.3,0.2,0.4
								s0.1,0.3,0.2,0.4l0.2,0.4l0.2,0.4c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.4c0.1,0.5,0.2,1.1,0.2,1.6l0,0v0.3c0,1.2-0.3,2.4-0.7,3.5
								c-0.2,0.5-0.4,1.1-0.6,1.6c-0.1,0.3-0.3,0.7-0.5,1l-0.3,0.7L21.8,17l-0.3,0.7c-0.4,0.7-0.7,1.4-1.1,2c-0.2,0.4-0.5,0.9-0.7,1.3
								L19,22.2l-0.3,0.6c-1.2,2-2,3.3-2.1,3.4C16.4,26.6,16,26.8,15.5,26.8L15.5,26.8z M15.5,2.8c-3.6,0.1-6.3,3.1-6.2,6.7
								c0,2.7,3.6,9.4,6.2,13.6l1-1.6l0.3-0.5c0.2-0.4,0.5-0.8,0.7-1.2s0.5-0.8,0.7-1.2c0.4-0.7,0.7-1.3,1-2c0.1-0.2,0.2-0.4,0.3-0.7
								l0.3-0.7l0.3-0.6c0.1-0.3,0.3-0.6,0.4-1c0.2-0.5,0.4-1,0.6-1.5c0.3-0.9,0.6-1.8,0.6-2.7V9.3c0-0.4,0-0.8-0.1-1.2
								c0-0.1,0-0.2-0.1-0.3s-0.1-0.4-0.2-0.6l-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3S21,6.4,21,6.3S20.9,6.1,20.8,6l-0.1-0.1
								c-0.2-0.4-0.5-0.7-0.7-1c-0.2-0.2-0.4-0.4-0.5-0.6l-0.2-0.2c-0.4-0.3-0.8-0.5-1.2-0.8l-0.3-0.1C17,2.9,16.3,2.8,15.5,2.8z
								 M15.5,13.4c-2.6-0.1-4.6-2.2-4.6-4.8c0,0,0,0,0,0c-0.1-2.6,2-4.7,4.5-4.8l0,0c2.6,0,4.7,2.2,4.7,4.8c0,0,0,0,0,0
								C20.1,11.1,18.1,13.3,15.5,13.4L15.5,13.4z M15.5,6.4c-1.2,0.1-2,1.1-2,2.2c-0.1,1.2,0.8,2.2,2,2.2c1.2-0.1,2.1-1.1,2-2.2
								C17.6,7.4,16.7,6.4,15.5,6.4C15.5,6.3,15.5,6.3,15.5,6.4L15.5,6.4z"></path>
							</svg>







    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M15.3,15.7c-0.3,0-0.5-0.1-0.8-0.2L2,6.5C1.4,6.1,1.3,5.3,1.7,4.7S2.9,4,3.5,4.4l11.9,8.5l12.1-8.5
								C28,4,28.8,4.1,29.2,4.7c0.4,0.6,0.3,1.4-0.3,1.8l0,0l-12.8,9C15.9,15.6,15.6,15.7,15.3,15.7z"></path>
							<path  d="M27.3,6.3c0.1,0,0.1,0.1,0.1,0.1V21c0,0.1-0.1,0.1-0.1,0.1H3.7c-0.1,0-0.1-0.1-0.1-0.1V6.5
								c0-0.1,0.1-0.1,0.1-0.1H27.3 M27.3,3.8H3.7C2.2,3.8,1,5,1,6.5V21c0,1.5,1.2,2.7,2.7,2.7h23.6c1.5,0,2.7-1.2,2.7-2.7V6.5
								C30,5,28.8,3.8,27.3,3.8L27.3,3.8z"></path>
							</svg>






    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M8.1,16.6c3,3,7.9,3,11,0s3-7.9,0-11s-7.9-3-11,0c-1.4,1.5-2.3,3.4-2.3,5.5C5.8,13.2,6.6,15.2,8.1,16.6z
							 M27.8,23.5c0.5,0.5,0.5,1.3,0,1.8c0,0,0,0,0,0c-0.5,0.5-1.3,0.5-1.8,0c0,0,0,0,0,0l-6-6c-4.5,3.5-11,2.7-14.6-1.8
							c-1.4-1.8-2.2-4.1-2.2-6.5c0-5.7,4.6-10.4,10.4-10.4C19.3,0.8,24,5.4,24,11.1c0,2.3-0.8,4.5-2.2,6.4L27.8,23.5z"></path>
						</svg>











    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
								<path  d="M24,18.8H10.3c-0.6,0-1.1-0.4-1.3-0.9L5.5,6.1L5.1,4.8c-0.3-1-1.1-1.6-2.1-1.7H1.3C0.6,3.2,0,2.7-0.1,2
									s0.5-1.3,1.2-1.4c0.1,0,0.2,0,0.2,0h1.6c2.1,0,3.9,1.4,4.6,3.4L8,5.2l0.3,1h21c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.3,1L30,14
									C29.6,16.9,27,19,24,18.8z M11.2,16.3H24c3.1,0,3.4-2.4,3.5-2.5l0.4-4.9H9L11.2,16.3z"></path>
								<path  d="M13.6,27c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2c0,0,0,0,0,0C16.7,25.6,15.3,27,13.6,27
									C13.6,27,13.6,27,13.6,27z M13.6,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0
									C14.2,23.5,13.9,23.2,13.6,23.2z"></path>
								<path  d="M25.3,27c-1.8,0-3.2-1.4-3.2-3.1c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1c0,0,0,0,0,0
									C28.4,25.6,27,27,25.3,27z M25.3,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6
									C25.9,23.5,25.6,23.2,25.3,23.2z"></path>
							</svg>







  </nav>

</div>