所以我正在做一個小的網頁設計專案，為此我做了一個下拉按鈕，它會顯示一個選項串列，一旦懸停/點擊，就會顯示一個選項串列，并添加了一個功能，當下拉按鈕懸停時在/點擊它會顯示一個朝上的箭頭圖示，當它不活動/懸停在/點擊它會顯示一個朝下的箭頭圖示。
我的問題是，由于某種原因，這些圖示在另一行中，在文本“過濾器”下方，我也試圖使按鈕的寬度更大，因為我認為這可能會解決它，但沒有，按鈕會變得更寬，但圖示將保持原樣。
這是我的下拉代碼：
button {
padding: 15px;
background: #0084FF;
color: #fff;
outline: none;
border: none;
transition: .2s;
margin-bottom: 5px;
}
button:hover {
cursor: pointer;
background: #006eff;
transition: .2s;
}
button a {
color: #fff;
text-decoration: none;
}
button a:hover {
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #eeeded;
min-width: 160px;
z-index: 9999;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.dropdown-content a {
color: #0084FF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
-webkit-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #0084FF;
}
.dropbtn #down {
display: block;
}
.dropbtn #up {
display: none;
}
.dropbtn:hover #down {
display: none;
}
.dropbtn:hover #up {
display: block;
}
.dropbtn:active #down {
display: none;
}
.dropbtn:active #up {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori Antique B1&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/T3C.png" />
<title>Website</title>
</head>
<body>
<div class="docs-body">
<div class="dropdown">
<button class="dropbtn" title="Filter">Filters <i id="down" class="fas fa-caret-down"></i> <i id="up" class="fas fa-caret-up"></i></button>
<div class="dropdown-content">
<a href="#web-dev"><i class="fas fa-ellipsis-h"></i> Option 1</a>
<a href="#software"><i class="fas fa-ellipsis-h"></i> Option 2</a>
<a href="#coding"><i class="fas fa-ellipsis-h"></i> Option 3</a>
<a href="#games"><i class="fas fa-ellipsis-h"></i> Option 4</a>
<a href="#other"><i class="fas fa-ellipsis-h"></i> Option 5</a>
</div>
</div>如您所見，朝下的箭頭圖示 ( fas fa-caret-down ) 和朝上的箭頭圖示 ( fas fa-caret-up ) 由于某種原因位于另一行而不是文本。有沒有辦法解決這個問題？
為了進一步澄清，.dropdown-content中的圖示作業正常，只是dropbtn 中的那些不是！所以這就是我需要幫助的！
uj5u.com熱心網友回復：
因為你在這里把元素變成了塊元素
.dropbtn #down {
display: block;
}
如果您洗掉該顯示：阻止它起作用，那么它們默認為行內。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360135.html