html 导航栏在css与配置文件的右侧和左侧的链接

qcuzuvrc 于 2023-10-14 发布在其他

关注(0)|答案(2)|浏览(117)

我试图在我的网站上用react和css做一个导航栏，但我无法在屏幕右侧找到配置文件按钮。我只能把它放在屏幕中间或远处。这是我的css的导航栏

.navbar {
  width: 100%;
  flex-flow: row;
  height: 70px;
  background-color: var(--color-surface-200);
  display: Flex;
  justify-content: space-between;
  position: sticky;
  top: 0px;
}
.rightbar {
  position: absolute; 
  right: 0px;
}
 .leftbar {
  justify-content: start;
}

.navbar a {
  margin-left: 20px;
  text-decoration: none;
  color: var(--color-primary-100);
}

下面是react/html部分：

<div className="navbar">
            {!authState.status ? (
              <div>
                <div class="leftbar">
                  <Link to="/"> HomePage</Link>
                  <Link to="/login"> Login </Link>
                  <Link to="/registration"> Registration </Link>
                </div>
                <div class="rightbar"></div>
              </div>
            ) : (
              <div>
                <div class="leftbar">
                  <Link to="/">HomePage</Link>
                  <Link to="/createpost">Create a post</Link>
                </div>
                <div class="rightbar">
                {Userdata ? (
                  <div class="dropdown">
                    <button class="dropbtn">
                      <Image
                        style={{ width: 35, height: 35, borderRadius: "50%" }}
                        source={{
                          uri: `https://server.fillyourfreetime.com/${Userdata.pfp}`,
                        }}
                      />{" "}
                      {Userdata.username}
                    </button>
                    <div class="dropdown-content">
                      <Link to={`/profile/${Userdata.id}`}>profile</Link>
                      <Link to="/editprofile">edit profile</Link>
                      <Link onClick={logout}>logout</Link>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                </div>
              </div>
            )}
          </div>

我试着在CSS中使用以下代码：justify-content: space-betweenjustify-content: rightjustify-content: end

.rightbar {
  with:50%
}
 .leftbar {
  width: 50%
}

但好像都不管用有人能帮帮忙吗

Html

来源：https://stackoverflow.com/questions/77246964/navbar-in-css-with-profile-on-right-side-and-links-on-the-left

2条答案

按热度按时间

xytpbqjk1#

在上面的HTML示例中，您将看到有一个额外的div Package 右栏和左栏。因此，flexbox完全按照您的要求执行操作，因为它内部只有一个元素。如果你像我在第二个例子中所做的那样删除div，它现在看到的是两个div，并像你期望的那样将它们隔开。运行代码段将使您给予更好的可视化效果。我希望这对你有帮助。

.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  background-color: var(--color-surface-200);
  border: 1px solid red;
}

<div class='navbar'>
  <div> <!--you need to remove this div-->
    <div class="leftbar">
      <Link to="/"> HomePage</Link>
      <Link to="/login"> Login </Link>
      <Link to="/registration"> Registration </Link>
    </div>
    <div class="rightbar">Profile</div>
  </div><!--you need to remove this div-->
</div>

<!--And do this instead -->

<div class='navbar'>
  <div class="leftbar">
    <Link to="/"> HomePage</Link>
    <Link to="/login"> Login </Link>
    <Link to="/registration"> Registration </Link>
  </div>
  <div class="rightbar">Profile</div>
</div>

赞(0）回复(0）举报 2023-10-14

s8vozzvw2#

您可以使用下面的代码，它将为您提供所需的样式给予。
我使用的是MUI的AppBar。

import {
  Box,
  AppBar,
  Toolbar,
  Typography,
} from "@mui/material";
import { Link } from "react-router-dom";
import AccountBalanceIcon from "@mui/icons-material/AccountBalance";

export type LinkType= {
  label: string;
  path: string;
};

const linksDetails: Array<LinkType> = [
  { label: "home", path: "/" },
  { label: "shop", path: "/shop" },
  { label: "settings", path: "/user-settings" },
];
const currentUser = { userId: 1111 };
export const Nav = () => {
  return (
    <AppBar
      sx={{ position: "relative", paddingRight: "0px !important" }}
    >
      <Toolbar>
        <Box className="logo-container">
          <Link to="/">
            <AccountBalanceIcon /> {/* logo */}
          </Link>
        </Box>
        <Box className="link-container">
          <Box>
            {linksDetails.map((link, index) => (
              <Link key={index} to={link.path}>
                {link.label}
              </Link>
            ))}
          </Box>
          <Typography
            className="language-menu-btn"
            onClick={() => console.log("change the language")}
            color="primary.main"
          >
            Language
          </Typography>

          {currentUser ? (
            <Box onClick={() => console.log("handle signout")}>
              <Link to="auth">Signout</Link>
            </Box>
          ) : (
            <Box>
              <Link to="auth">signin</Link>
            </Box>
          )}
        </Box>
      </Toolbar>
    </AppBar>
  );
};

使用以下CSS：

.logo-container {
  flex-grow: 1;
}

.link-container {
  flex-grow: 2;
  display: flex;
  justify-content: space-between;
  a {
    margin: 0px 10px;
    color: #fff;
    transition: color 0.2s ease-in;
    &:hover {
      color: #e76712;
    }
  }
}

赞(0）回复(0）举报 2023-10-14

我来回答

html 导航栏在css与配置文件的右侧和左侧的链接

2条答案

相关问题

热门标签

最新问答