如何垂直对齐包含在列表元素中的 div？

Question

我有一个正在处理的响应式折叠菜单，我希望菜单项居中，loge 左对齐，搜索框右对齐。

我主要按照自己的意愿进行设置，但要显示带有图标的搜索框，需要将其包裹在 div 中。我一直无法将我的搜索 div 放置在我的菜单项列表中并使其垂直居中。

我正在使用 Bulma CSS 框架并尝试了各种定位类，但没有任何效果。

这是我目前的尝试：

    body {
        font-family: Helvetica, Arial, sans-serif;
        background-color: rgb(236, 236, 236);
        margin: 0em;
        color: rgb(19, 51, 61);
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: bold;
        color: rgb(51, 51, 51);
        max-width: 55em;
    }

    p a {
        color: rgb(41, 183, 206);
        text-decoration: none;
    }

    strong {
        color: rgb(41, 183, 206);
    }

    nav {
        font-size: 12px;
        background-color: rgb(19, 51, 61);
        box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
        padding: 0 1em;
        height: 44px;
        overflow: hidden;
        text-align: center;
    }

    nav img {
        text-align: left;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        max-height: 88px;
        position: relative;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        display: inline-block;
        padding: 0 1em;
        color: rgb(236, 236, 236);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 44px;
        height: 44px;
    }

    nav a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav li:last-child { 
        position: absolute; 
        right: 0;
        bottom: 44px; 
        background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
        padding-left: 3em;
    }

    nav li:nth-last-child(2) { 
        display: none;
    }

    nav#menu:target {
        height: auto;
        padding: 0;
    }

    nav#menu:target ul {
        max-height: none;
    }

    nav#menu:target li {
        display: block;
    }

    nav#menu:target a {
        display: block;
        padding: 0 2em;
        background-color: rgba(255, 255, 255, 0.05);
    }

    nav#menu:target a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav#menu:target li:not(:first-child) {
        margin-top: 2px;
    }

    nav#menu:target li:last-child {
        display: none;
    }

    nav#menu:target li:nth-last-child(2) {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        border-left: 2px solid rgb(19, 51, 61);
    }
    
    .search-bg {
    height: 50%;
    background-color: transparent;
}

.sb-example-1 .search {
  width: 100%;
  position: relative;
  display: flex;
}
.sb-example-1 .searchTerm {
  width: 100%;
  border: 2px solid rgba(243,241,224,1);
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
  color: #00B4CC;
}
.sb-example-1 .searchButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(243,241,224,1);
  background: rgba(243,241,224,1);
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.sb-example-1 .searchButton i{
  color: black;
}

.searchandsocial {
  vertical-align: top;
  position: absolute;
  right: 0;
}


.logo {    
  max-height: 34px;
  position: absolute;
  left: 0;
}

.logosize {
  max-height: 60px !important;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  
<nav id="menu">
    <ul id="menu-closed">
        <li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li>
        <div class="sb-example-1 searchandsocial">
         <div class="search">
            <input type="text" class="searchTerm" placeholder="Search">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
         </div>
        </div>
        </li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>
  </body>
</html>

这里正确的方法是什么？

此外，如何防止搜索框与其他列表元素重叠？

Answer 1

将top:2px应用到.searchandsocial:

    body {
        font-family: Helvetica, Arial, sans-serif;
        background-color: rgb(236, 236, 236);
        margin: 0em;
        color: rgb(19, 51, 61);
    }

    p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: bold;
        color: rgb(51, 51, 51);
        max-width: 55em;
    }

    p a {
        color: rgb(41, 183, 206);
        text-decoration: none;
    }

    strong {
        color: rgb(41, 183, 206);
    }

    nav {
        font-size: 12px;
        background-color: rgb(19, 51, 61);
        box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
        padding: 0 1em;
        height: 44px;
        overflow: hidden;
        text-align: center;
    }

    nav img {
        text-align: left;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        max-height: 88px;
        position: relative;
    }

    nav li {
        display: inline-block;
    }

    nav a {
        display: inline-block;
        padding: 0 1em;
        color: rgb(236, 236, 236);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 44px;
        height: 44px;
    }

    nav a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav li:last-child { 
        position: absolute; 
        right: 0;
        bottom: 44px; 
        background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
        padding-left: 3em;
    }

    nav li:nth-last-child(2) { 
        display: none;
    }

    nav#menu:target {
        height: auto;
        padding: 0;
    }

    nav#menu:target ul {
        max-height: none;
    }

    nav#menu:target li {
        display: block;
    }

    nav#menu:target a {
        display: block;
        padding: 0 2em;
        background-color: rgba(255, 255, 255, 0.05);
    }

    nav#menu:target a:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    nav#menu:target li:not(:first-child) {
        margin-top: 2px;
    }

    nav#menu:target li:last-child {
        display: none;
    }

    nav#menu:target li:nth-last-child(2) {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        border-left: 2px solid rgb(19, 51, 61);
    }
    
    .search-bg {
    height: 50%;
    background-color: transparent;
}

.sb-example-1 .search {
  width: 100%;
  position: relative;
  display: flex;
}
.sb-example-1 .searchTerm {
  width: 100%;
  border: 2px solid rgba(243,241,224,1);
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
  color: #00B4CC;
}
.sb-example-1 .searchButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(243,241,224,1);
  background: rgba(243,241,224,1);
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.sb-example-1 .searchButton i{
  color: black;
}

.searchandsocial {
  vertical-align: top;
  position: absolute;
  right: 0;
  top:2px;
}


.logo {    
  max-height: 34px;
  position: absolute;
  left: 0;
}

.logosize {
  max-height: 60px !important;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  
<nav id="menu">
    <ul id="menu-closed">
        <li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li>
        <div class="sb-example-1 searchandsocial">
         <div class="search">
            <input type="text" class="searchTerm" placeholder="Search">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
         </div>
        </div>
        </li>
        <li><a href="#menu-closed">&#215; Close menu</a></li>
        <li><a href="#menu">&#9776; Menu</a></li>
    </ul>
</nav>
  </body>
</html>

如何垂直对齐包含在列表元素中的 div？

How to vertically align a div wrapped within a list element?

html

css

bulma