垂直对齐导航栏中的项目

Question

我有一个导航栏，希望其中的所有项目都垂直对齐。我首先尝试使用 flexbox，这导致元素之间有太多 space，我通过使用 float: right 而不是 flexbox.

来解决这个问题。

我的目标是让导航栏看起来像这样：（在 Photoshop 中制作）

但布局不同。

这是我目前的情况：

html, body {
  margin: 0;
}

.topnav {
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    float: left;
    display: block;
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}

.search {
    float: right;
    margin-right: 10px;
    height: 6vh;
    padding-left: 12px;
    border-radius: 0;
    width: 20vw;
}

input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0px none transparent;
    border-radius: 10px;
    line-height: 20px;
    background: #181818;
    color: rgb(255, 255, 255);
}

input[type="text"].dark {
    background: rgb(27, 27, 27);
    color: #fff;
}

input[type="text"].light {
    background: #fff;
    color: #222;
}

input[type="text"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1.4em;
    width: 1.4em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 70% 70%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    margin-right: min(5%, 20px);
}

input[type="text"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

input[type="text"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}

::placeholder {
    color: rgb(194, 194, 194);
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

::-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

.create {
    color: white;
    float: right !important;
    cursor: pointer;
    border:0;
    background-color: #343434;
    border: 1px solid #f6f6f6;
    padding: 5px;
    border-radius: 10px;
    font-size: 250%;
    margin-right: .5vw;
    height: 3vh;
    color: #1f282c;
}

.usericon {
    font-size: 5vh;
    font-weight: 100;
    margin-right: 3vw;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
        <div class="topnav">
            <a class="active" href="#">Home</a>
            <a href="#profile" style="float:right"><i class='fas fa-user-circle usericon' id="profile"></i></a>
            <input type="text" placeholder="Search.." class="search dark">
            <a href="#create" style="float:right"><i class='fas fa-plus create' id="create"></i></a>
        </div>
    </body>
</html>

这是结果：

唯一的区别是我使用了自定义 SVG 而不是 font awesome 图标，这就是它看起来很奇怪的原因。

是否可以垂直对齐导航栏中的所有项？目前，个人资料图片和加号图标看起来是垂直对齐的，但搜索栏和主页文本不是。

这可能吗？谢谢。

Answer 1

如果简化布局，只需将一个 flexbox 容器 (.topnav__right) 放在另一个 (.topnav) 中即可实现。

html,
body {
  margin: 0;
}

.topnav {
  border: 1px solid #252525;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.topnav a {
  display: block;
  color: rgb(236, 236, 236);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
}

.home {
  background-color: red;
}

.create {
  background-color: blue;
}

.profile {
  background-color: green;
}


.topnav__right {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.search {
  height: 6vh;
  width: 20vw;
  margin: 0 12px;
}

<div class="topnav">
  <a class="home" href="#">Home</a>
  <div class="topnav__right">
    <a href="#create" class="create">Create</a>
    <input type="text" placeholder="Search.." class="search dark">
    <a href="#profile" class="profile">Profile</a>
  </div>
</div>

Answer 2

常规 .topnav 布局要求：

按逻辑顺序定位 HTML 导航项
用 flexbox 替换 float
让所有 3 个右侧导航项目共享相同的弹性项目 div
借助弹性容器属性 align-items 和 justify-content:

html, body {
  margin: 0;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
      <div class="topnav">
        <a class="active" href="#">Home</a>
        <div>
          <a href="#create"><i class='fas fa-plus create' id="create"></i></a>
          <input type="text" placeholder="Search.." class="search dark">                
          <a href="#profile"><i class='fas fa-user-circle usericon' id="profile"></i></a>
        </div>
      </div>
    </body>
</html>

垂直对齐导航栏中的项目

Vertical align items in navbar

html

css

vertical-alignment

navbar