为什么按钮不能正确浮动？

Question

我试图让登录按钮在我制作的导航栏上浮动，但它不起作用，我到处搜索正确答案。有什么想法吗？

import React, { Component } from "react";
import "./App.css";

class Home extends Component {
    render() {
        return (
            <div className="nav-bar">
                <h1 style={{color: 'white'}}>To-do list</h1>
                <div style={{float: 'right'}}>
                    {/*The button I am trying to fix*/}
                    <a className="btn btn-dark btn-lg" href="/login">Login</a>
                </div>
            </div>
        )
    }
}

export default Home;

Answer 1

问题在于h1 是块级元素，因此您的按钮不会浮动到它的右侧，因为h1 占据了整行。

一种解决方案是让您的 .nav-bar 使用 flexbox 布局模式：

.nav-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

一旦将布局模式设置为 flexbox，float 属性将不再有任何作用。您可以将其从元素的内联样式中移除。