專案未正確對齊CSS-有解無憂

我正在使用 React 制作一個網站，這里我使用的是 html 和 css。我有一個導航欄和一個搜索欄，但問題是搜索欄正在更改導航欄中標題的對齊方式，這是代碼框 - https://codesandbox.io/s/aged-pine-0x9t60 ?file=/src/App.js

請確保增加結果大小，以便您可以正確查看。在這里，我希望標題位于中心，搜索欄位于左側，選單圖示位于右側。目前，搜索欄在左側，選單圖示在右側，但標題不在中間。請幫我解決這個問題。感謝您有一個愉快的一天。

uj5u.com熱心網友回復：

我已通過洗掉不必要的邊距/填充并添加 flexx 來更正您的代碼

應用程式.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>
  );
}

樣式.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

uj5u.com熱心網友回復：

您可以將這些樣式添加到您的.header：

.header {
   display: flex;
   align-items: center;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477740.html

標籤：html css 反应导航栏

上一篇：如何在CSS中創建平滑的下降影片？

下一篇：有人可以解釋Width:100%VS.之間的區別嗎？寬度：100vw以簡單的方式？