如果按钮与 h1 在同一行，则按钮不起作用答案

【问题标题】：Button does not work if its on the same line as a h1如果按钮与 h1 在同一行，则按钮不起作用
【发布时间】：2021-11-20 00:40:39
【问题描述】：

所以我希望我的页面标题和个人资料按钮位于同一行（每个页面的标题）。但是，按钮在同一行时不起作用，而在不同行时起作用。

    return (
        <div className='Master-div'>
            <Sidebar />
            <div className='contacts'>
                <div className='header-dashboard'>
                    <h1>Dashboard</h1>
                    <ProfileButton></ProfileButton> /*this does not work*/
                </div>
                <div><ProfileButton></ProfileButton></div> /*this works*/
                <div className='line'></div>
                <div className='contents'></div>
            </div>
        </div>
    )
}

export default Dashboard

.header-dashboard{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

我尝试过制作不同的 div 并使用 CSS 将它们放在同一行，但这也不起作用。非常感谢您的帮助。

【问题讨论】：

尝试<ProfileButton />，因为您没有传入任何数据或子项。但这些行之间似乎没有任何区别。

标签： javascript html css reactjs web-applications

【解决方案1】：

默认的 h1 元素样式是display:block。

如果您手动将其作为内联，那么它们将彼此相邻出现。

h1 style="display: inline"

【讨论】：

谢谢！只是发现我在 div 下方有一条重叠线，因此按钮不起作用！不过感谢您的回复！