我正在使用React制作一个网站，这里我使用html和css。我有一个导航栏和一个搜索栏，但问题是，搜索栏正在改变导航栏标题的对齐方式，这里是codesandbox - https://codesandbox.io/s/aged-pine-0x9t60?file=/src/App.js
请确保增加结果大小，以便您可以正确地看到它。在这里，我希望标题在中间，搜索栏在左边，菜单图标在右边。目前，搜索栏在左边，菜单图标在右边，但标题不在中间。请帮我解决这个问题。谢谢，祝你愉快。
我通过删除不必要的边距/填充并添加flexx
来纠正您的代码App.js
import "./styles.css";
export default function App() {
return (
<nav class="header">
<form action="" class="search-bar">
<input
type="search"
name="search"
pattern=".*S.*"
class="myinput"
required
/>
<button class="search-btn searchbtn" type="submit">
<span>Search</span>
</button>
</form>
<center>
<a href="" class="logo">
BEST FURNITURE
</a>
</center>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li style={{marginRight:'5px'}}>
<center>
<svg class="svg-icon" viewBox="0 0 20 20">
<path
fill="none"
d="M17.671,13.945l0.003,0.002l1.708-7.687l-0.008-0.002c0.008-0.033,0.021-0.065,0.021-0.102c0-0.236-0.191-0.428-0.427-0.428H5.276L4.67,3.472L4.665,3.473c-0.053-0.175-0.21-0.306-0.403-0.306H1.032c-0.236,0-0.427,0.191-0.427,0.427c0,0.236,0.191,0.428,0.427,0.428h2.902l2.667,9.945l0,0c0.037,0.119,0.125,0.217,0.239,0.268c-0.16,0.26-0.257,0.562-0.257,0.891c0,0.943,0.765,1.707,1.708,1.707S10,16.068,10,15.125c0-0.312-0.09-0.602-0.237-0.855h4.744c-0.146,0.254-0.237,0.543-0.237,0.855c0,0.943,0.766,1.707,1.708,1.707c0.944,0,1.709-0.764,1.709-1.707c0-0.328-0.097-0.631-0.257-0.891C17.55,14.182,17.639,14.074,17.671,13.945 M15.934,6.583h2.502l-0.38,1.709h-2.312L15.934,6.583zM5.505,6.583h2.832l0.189,1.709H5.963L5.505,6.583z M6.65,10.854L6.192,9.146h2.429l0.19,1.708H6.65z M6.879,11.707h2.027l0.189,1.709H7.338L6.879,11.707z M8.292,15.979c-0.472,0-0.854-0.383-0.854-0.854c0-0.473,0.382-0.855,0.854-0.855s0.854,0.383,0.854,0.855C9.146,15.596,8.763,15.979,8.292,15.979 M11.708,13.416H9.955l-0.189-1.709h1.943V13.416z M11.708,10.854H9.67L9.48,9.146h2.228V10.854z M11.708,8.292H9.386l-0.19-1.709h2.512V8.292z M14.315,13.416h-1.753v-1.709h1.942L14.315,13.416zM14.6,10.854h-2.037V9.146h2.227L14.6,10.854z M14.884,8.292h-2.321V6.583h2.512L14.884,8.292z M15.978,15.979c-0.471,0-0.854-0.383-0.854-0.854c0-0.473,0.383-0.855,0.854-0.855c0.473,0,0.854,0.383,0.854,0.855C16.832,15.596,16.45,15.979,15.978,15.979 M16.917,13.416h-1.743l0.189-1.709h1.934L16.917,13.416z M15.458,10.854l0.19-1.708h2.218l-0.38,1.708H15.458z"
></path>
</svg>
<p style={{ fontSize: "0.6rem" }}>Cart</p>
</center>
</li>
<li style={{marginRight:'5px'}}>
<center>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
</svg>
<p style={{ fontSize: "0.6rem" }}>Search</p>
</center>
</li>
<li style={{marginRight:'5px'}}>
<center>
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
</svg>
<p style={{ fontSize: "0.6rem" }}>Account</p>
</center>
</li>
</ul>
</nav>
);
}
style.css
@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin: 0;
padding: 0;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 5px 5px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
display:flex;
align-items: center;
justify-content: space-between;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
font-family: "Raleway", sans-serif;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
font-size: 250%;
padding: 10px;
text-decoration: none;
font-family: "Raleway", sans-serif;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.brlarge {
display: block;
margin-bottom: 6em;
}
.svg-icon {
width: 1.3em;
height: 1.3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.searchbtn,
.myinput {
font: 1em Hind, sans-serif;
line-height: 1.5em;
}
.myinput {
color: #171717;
}
.search-bar {
float: left;
}
.search-bar .myinput,
.search-btn,
.search-btn:before,
.search-btn:after {
transition: all 0.25s ease-out;
}
.search-bar .myinput,
.search-btn {
width: 3em;
height: 3em;
}
.search-bar .myinput:invalid:not(:focus),
.search-btn {
cursor: pointer;
}
.search-bar .myinput:focus,
.search-bar .myinput:valid {
width: 50%;
}
.search-bar .myinput:focus,
.search-bar .myinput:not(:focus) + .search-btn:focus {
outline: transparent;
}
.search-bar {
padding: 1.5em;
max-width: 30em;
}
.search-bar .myinput {
background: transparent;
border-radius: 1.5em;
box-shadow: 0 0 0 0.4em #171717 inset;
padding: 0.75em;
transform: translate(0.5em, 0.5em) scale(0.5);
transform-origin: 100% 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-bar .myinput::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-bar .myinput:focus,
.search-bar .myinput:valid {
background: #fff;
border-radius: 0.375em 0 0 0.375em;
box-shadow: 0 0 0 0.1em #d9d9d9 inset;
transform: scale(1);
}
.search-btn {
background: #171717;
border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
padding: 0.75em;
position: relative;
transform: translate(0.25em, 0.25em) rotate(45deg) scale(0.25, 0.125);
transform-origin: 0 50%;
}
.search-btn:before,
.search-btn:after {
content: "";
display: block;
opacity: 0;
position: absolute;
}
.search-btn:before {
border-radius: 50%;
box-shadow: 0 0 0 0.2em #f1f1f1 inset;
top: 0.75em;
left: 0.75em;
width: 1.2em;
height: 1.2em;
}
.search-btn:after {
background: #f1f1f1;
border-radius: 0 0.25em 0.25em 0;
top: 51%;
left: 51%;
width: 0.75em;
height: 0.25em;
transform: translate(0.2em, 0) rotate(45deg);
transform-origin: 0 50%;
}
.search-btn span {
display: inline-block;
overflow: hidden;
width: 1px;
height: 1px;
}
/* Active state */
.search-bar .myinput:focus + .search-btn,
.search-bar .myinput:valid + .search-btn {
background: #2762f3;
border-radius: 0 0.375em 0.375em 0;
transform: scale(1);
}
.search-bar .myinput:focus + .search-btn:before,
.search-bar .myinput:focus + .search-btn:after,
.search-bar .myinput:valid + .search-btn:before,
.search-bar .myinput:valid + .search-btn:after {
opacity: 1;
}
.search-bar .myinput:focus + .search-btn:hover,
.search-bar .myinput:valid + .search-btn:hover,
.search-bar .myinput:valid:not(:focus) + .search-btn:focus {
background: #0c48db;
}
.search-bar .myinput:focus + .search-btn:active,
.search-bar .myinput:valid + .search-btn:active {
transform: translateY(1px);
}
@media screen and (prefers-color-scheme: dark) {
.myinput {
color: #000;
}
.search-bar .myinput {
box-shadow: 0 0 0 0.4em #000 inset;
}
.search-bar .myinput:focus,
.search-bar .myinput:valid {
background: #fff;
box-shadow: 0 0 0 0.1em #3d3d3d inset;
}
.search-btn {
background: #000;
}
}
只是一个小小的建议，将App.js中的
class替换为className
您可以将这些样式添加到您的.header:
.header {
display: flex;
align-items: center;
}