我有一個導航欄，并希望其中的所有專案垂直對齊。我首先嘗試使用 flexbox，這導致元素之間有太多空間，我通過使用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 而不是字體真棒圖示，這就是為什么它看起來很奇怪。
是否可以垂直對齊導航欄中的所有專案？目前，看起來個人資料圖片和加號圖示是垂直對齊的，但搜索欄和主頁文本不是。
這可能嗎？謝謝。
uj5u.com熱心網友回復：
.topnav要求的總體布局：
- 按邏輯順序定位 HTML 導航項
- 用 flexbox 替換浮動
- 讓所有 3 個右側導航項共享相同的 flex 項
div - 借助 flex 容器屬性
align-items，使 flex 容器專案垂直對齊并水平展開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>uj5u.com熱心網友回復：
如果您簡化布局，則可以僅使用一個 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351423.html