import React from "react";
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import './NavBar.css';
function NavBar() {
const heading = 'first heading'
let list = ['About Us', 'Career Page', 'Resources']
const BuildList = () => {
return(
<>
<div className = 'nav-container'>
<div className='logo-container'> Logo Container</div>
<div className='nav-content-container'>
</div>
<div className="navbar-primary-menu">
{ list.map((key) => (<div className='navbar-primary-menu-items' key={key}> {key} </div>)) }
</div>
<div className="search-container">
<svg className='search-icon' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 48 48">
<path fill="#616161" d="M34.6 28.1H38.6V45.1H34.6z" transform="rotate(-45.001 36.586 36.587)"></path><path fill="#616161" d="M20 4A16 16 0 1 0 20 36A16 16 0 1 0 20 4Z"></path><path fill="#37474F" d="M36.2 32.1H40.2V44.400000000000006H36.2z" transform="rotate(-45.001 38.24 38.24)"></path><path fill="#64B5F6" d="M20 7A13 13 0 1 0 20 33A13 13 0 1 0 20 7Z"></path><path fill="#BBDEFB" d="M26.9,14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2,1.2-6.9,3.2c-0.4,0.4-0.3,1.1,0.1,1.4c0.4,0.4,1.1,0.3,1.4-0.1C16,13.9,17.9,13,20,13s4,0.9,5.4,2.5c0.2,0.2,0.5,0.4,0.8,0.4c0.2,0,0.5-0.1,0.6-0.2C27.2,15.3,27.2,14.6,26.9,14.2z"></path>
</svg>
<input className='input-field' type='text'></input>
</div>
</div>
</>
);
};
// const element = <ul> <li>Hello there</li></ul>
return(
<div>
<BuildList/>
</div>
);
}
export default NavBar
导航栏.css
.nav-container {
display: flex;
background: cyan;
justify-content: space-between;
align-items: center;
border: 2px solid black;
width: 100%;
gap: 10px
}
.list {
list-style-type: none;
border: 10px solid yellow;
}
li {
padding: 5px;
margin: auto;
border: 10px solid red;
}
.logo-container {
display: flex;
align-items: center;
border: 2px solid black;
margin-left: 2em;
}
.text-box {
margin-right: 10px;
margin-left: 20px;
}
.text-box input[type="text"] {
width: 10px;
}
.navbar-primary-menu {
display: flex;
flex-direction: row;
justify-content: space-around;
max-width: 30%;
border: 2px solid white;
}
.navbar-primary-menu-items {
border: 2px solid red;
}
.search-container {
display: flex;
align-items: flex-end;
padding: 2px;
margin-right: 2em;
}
.search-icon {
border: 2px solid yellow;
max-height: 30px;
max-width: 30px;
}
.input-field {
max-height: 100px;
max-width: 100px;
}
我正在尝试使用 Flexbox 构建一个导航栏。 (我是个初学者,不太了解 css,正在尝试一些东西来理解 css)
但问题是,如附图所示的弹性项目是
我遇到的问题是,
“中间的小菜单”div 左侧空间较多,右侧空间较少。即从徽标容器到“小菜单”的空间更多。不知道怎么解决
我正在尝试做什么:
(我提到的不均匀间隙是图像中显示的带有条纹的蓝色间隙)
有人可以帮助我了解如何做到这一点吗?
如果您使用空格进行调整,则需要删除“nav-content-container”div。
“导航容器”div 中应该有 3 个 div,而不是 4 个。
探索 justify-content 的工作原理: https://www.w3schools.com/cssref/css3_pr_justify-content.php