嘿，我嘗試創建一個搜索功能，在其中搜索以在串列中找到我的產品，但現在我遇到了一個小問題，那就是 searchBox 不在右上角。我嘗試了很多東西，但沒有任何反應。在左角有我的標志，我試圖把它放在右上角。
這是我的搜索功能：
function Navbar() {
const [inputText, setInputText] = useState("");
let inputHandler = (e) => {
//convert input text to lower case
var lowerCase = e.target.value.toLowerCase();
setInputText(lowerCase);
};
return (
<div className="navbar">
<div className="logo">Shop</div>
<div className="searchBox">
<Product input={inputText} />
<TextField
id="outlined-basic"
onChange={inputHandler}
variant="outlined"
label="Search"
></TextField>
</div>
</div>
);
}
export default Navbar;
這是我的CSS：
.navbar {
width: 100%;
height: 50px;
background-color: rgb(32, 32, 32);
.logo {
color: aqua;
font-size: 1.8rem;
font-family: "Orbitron", sans-serif;
line-height: 40px;
margin-left: 20px;
}
.searchBox {
color: aqua;
font-size: 1.8rem;
height: 1%;
width: 100%;
font-family: "Orbitron", sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
}
uj5u.com熱心網友回復：
也許嘗試 display: flex, justify-content: space-between and width 100% on .navbar。同時從 .searchBox 中洗掉 width: 100%
uj5u.com熱心網友回復：
嘗試這個！
.navbar {
width: 100%;
height: 50px;
background-color: rgb(32, 32, 32);
display: flex;
align-items: center;
justify-content: space-between;
.logo {
color: aqua;
font-size: 1.8rem;
font-family: "Orbitron", sans-serif;
line-height: 40px;
margin-left: 20px;
}
.searchBox {
color: aqua;
font-size: 1.8rem;
height: 1%;
font-family: "Orbitron", sans-serif;
display: flex;
align-items: center;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526142.html