有没有办法将Navbar中的三个项目对齐（左，右和中间）？

Question

因此，我正在尝试在ReactJ和CSS中实现这种外观。这是代码：

    export default function Navbar() {
    return (
        <div className={styles.container}>
            <p className={styles.navLogo}>shopr</p>
            <div className={styles.navSearchBar}>
                <input type='text' className={styles.searchBarInput} />

            </div>
            <div className={styles.navProfileShoppingContainer}>
                <a>
                    <Image
                    src={ProfileIcon}
                    height={35}
                    width={35}
                    alt="profileIcon" 
                    />
                </a>
                <a>
                    <Image
                    src={ShoppingCartIcon}
                    height={32}
                    width={40}
                    alt='searchIcon'
                    />
                </a>
            </div>
        </div>
    )
}

这是CSS：

.container {
    display: flex;
}

.navProfileShoppingContainer {
    float: right;
    background-color: #E5B3B3;
    padding: 5px;
    justify-content: center;
    border-radius: 10px;
    width: 130px;
    height: 50px;
}

.navProfileShoppingContainer a {
    margin: 10px;
}

.navLogo {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #CF7E7E;
    
}

这是看起来我正在尝试实现vs vs vs 看起来如何 我遇到的主要问题是Flex，因为Float在父级上无法使用它。 〜 任何帮助都将不胜感激。谢谢！

Answer 1

我一直在做的是在纳维托中创建三个部分。
看起来像这样：

<div className={styles.container}>
    <div className={styles.left}>
       // Content here
    </div>
    <div className={styles.middle}>
       // Content here
    </div>
    <div className={styles.right}>
       // Content here
    </div>
</div>

您的CSS看起来像这样。

.container {
  display: flex;
}

.left {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.middle { 
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

通过使用flex：1，我们在容器内创建了三个同等大小的框。
您可以根据自己的喜好对所有盒子进行样式的样式。

Answer 2

只需添加Align-Items：Center;和josify-content：Space-between; toemander

Answer 3

export default function Navbar() {
return (
    <div className={styles.container}>
        <div className={styles.navLogo}>shop</div>
        <div className={styles.navSearchBar}>
            <input type='text' className={styles.searchBarInput} />

        </div>
        <div className={styles.navProfileShoppingContainer}>
            <div><a>
                <Image
                src={ProfileIcon}
                height={35}
                width={35}
                alt="profileIcon" 
                />
            </a></div>
            <div><a>
                <Image
                src={ShoppingCartIcon}
                height={32}
                width={40}
                alt='searchIcon'
                />
            </a></div>
        </div>
    </div>
)

}

Answer 4

.container {
    display: flex;
}
.navProfileShoppingContainer {
    display:flex;
    float: right;
    background-color: #E5B3B3;
    gap : 30px
    justify-content: center;
    border-radius: 10px;
    width: 130px;
    height: 50px;
}
.navLogo {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 48px;
    color: #CF7E7E;
    
}