如何使用样式化组件将按钮固定在标题右侧？答案

【问题标题】：How do I stick to the button right in header using styled components?如何使用样式化组件将按钮固定在标题右侧？
【发布时间】：2020-11-05 17:20:09
【问题描述】：

我正在尝试向右那个按钮，但我不知道怎么做。有人能帮我吗？我在HomeButton 上尝试过position:right，但没有帮助。这是我的代码：

Header.styles.js

import styled from 'styled-components';

export const Wrapper = styled.div`
    display:flex;
    background-color: #a86332;
    padding: 1%;
`
export const Title = styled.h1`
    color: white;
    margin:0;
`
export const HomeButton = styled.button`
    border:2;
    margin:10px 10px 10px 0;
    height: 50px;
    width: 50px;
    background-color:#a86000;
    border-color:white;
    color:white;
    cursor:pointer;
    transition-duration:250ms;
    &:hover{
        height: 70px;
        width: 70px;
        margin:0 0 0 0;
        color:black;
        background-color:white;
        border-color: red;
    }
`

Header.js

import React from 'react'
import { HomeButton, Title, Wrapper } from './Header.styles'


const Header = () => {
    return (
        <Wrapper>
            <Title>McKing Burger</Title>
            <HomeButton >Home</HomeButton>
        </Wrapper>
    )
}

export default Header

截图

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

export const Wrapper = styled.div`
display:flex;
justify-content: space-between;
background-color: #a86332;
padding: 1%;`

只需将“justify-content”属性添加到 Wrapper 样式。 :)

【讨论】：

非常感谢！

【解决方案2】：

用justify-content: space-between在每个项目之间留出空格

export const Wrapper = styled.div`
    display:flex;
    background-color: #a86332;
    padding: 1%;
    justify-content: space-between;
`

或在按钮上添加align-self: flex-end。

【讨论】：

非常感谢！

【解决方案3】：

您可以通过将这些 CSS 规则应用于包装器来实现：

display: flex;
flex-direction: row;
justify-content: space-between;

【讨论】：

非常感谢！

【解决方案4】：

像这样使用显示弹性：

export const Wrapper = styled.div`
    display:flex;
    background-color: #a86332;
    padding: 1%;
    display:flex;
    justify-content: space-between;
`

它将同时使用标题和主页按钮并将它们分开，将标题留在左侧，按钮在右侧:)

【讨论】：

非常感谢！

【解决方案5】：

您可以通过多种方式做到这一点。

首先通过justify-content: space-between;

export const Wrapper = styled.div`
    display:flex;
    justify-content: space-between;
`

第二遍right:0：

 export const Wrapper = styled.div`
  position: absolute;
  top: 10px;
  right:0;
 `

第三次通过这种方式justify-content: flex-end;

export const Wrapper = styled.div`
        display: flex;
        justify-content: flex-end;
     `

【讨论】：

【解决方案6】：

你可以解决你的问题；

export const Wrapper = styled.div`
        display:flex;
        background-color: #a86332;
        padding: 1%;
       justify-content: space-between;
    `

【讨论】：

非常感谢！