时间戳

首页 > 解决方案 > 如何将按钮对齐到窗口的右侧

css - 如何将按钮对齐到窗口的右侧

问题描述

我正在尝试将登录按钮与页面的右上角对齐。

我在页面的左角有徽标，需要将登录按钮保留在右上角。当我尝试使用 padding-left 时，当我看到另一个屏幕尺寸时，对齐方式正在改变。

我在 React JS 中构建它

   <Box >
  <Grid className="custom-home__header" >
    <Box padding={{ vertical: "s" }}>
      <Grid>
        <Box>
          <img
            className="photo"
            src={image}
            alt=" Logo"
          />
        </Box>
      </Grid>

    </Box>

    <Box className="style" padding={{ vertical: "m" }} >
      <Grid
        className="custom-home__header" >
        <Box className="style" >
          <Button className="style"
            variant="primary"
            onClick={(e) => {
              e.preventDefault();
              const {
                REACT_APP_AUTH_URL,
                REACT_APP_CLIENT_ID,
              } = process.env;
              const authUrl = new URL(
                `${REACT_APP_AUTH_URL}/login` || ""
              );
              authUrl.searchParams.append("response_type", "token");
              const stateValue = uuidv4();
              storeAccessTokenState(stateValue);
              authUrl.searchParams.append("state", stateValue);
              authUrl.searchParams.append(
                "client_id",
                REACT_APP_CLIENT_ID || ""
              );
              authUrl.searchParams.append(
                "scope",
                "profile openid"
              );
              authUrl.searchParams.append(
                "redirect_uri",
                encodeURI(`${window.location.href}callback`)
              );
              window.location.href = authUrl.href;
            }}
          >
            Login
          </Button>

        </Box>

CSS：

.custom-home__header {
  background-color: $color-background-home-header;
}

.login{
padding-left: 620px;
}

我怎样才能做到这一点？ 登录屏幕

请看屏幕截图登录屏幕，我需要将登录按钮对齐到右上角

标签： cssreactjs

解决方案

更新：现在您已经发布了您的 CSS，您可以使用position该按钮将按钮移动到右上角

.login{
  position: absolute;
  top:10px;
  right:10px;
}

根据您想要放置的位置，您可以设置position按钮的，即：

将按钮放在相对于容器的右上角position: absolute;

或者在右上方固定到相对于窗口的右上方position: fixed;。

top: 0px;将您的元素设置为顶部

right: 0px;将您的元素设置在右侧

无论您的页面滚动如何，将其设置在页面的右上角都会将其保持在固定位置。

.topRightOfContainer {
  position: absolute;
  top: 10px;
  right: 10px;
}

.FixedOntopRightOfPage {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1;
}

div {
  position: relative;
  height: 200px;
  border: 1px solid black;
  margin-top: 20px;
}

button {
  padding: 10px;
  border: none;
  background-color: #999900;
  color: white;
}
<button class="FixedOntopRightOfPage">Button Fixed on Top Right of Page</button>
<div>
  A Container
</div>
<div>
  Another Container
  <button class="topRightOfContainer">Button on Top Right of Container</button>
</div>

推荐阅读