如何让按钮在React中浮动？
如何让按钮在React中浮动？
提问于 2021-03-09 02:34:42
我正在尝试将Add Server按钮移动到屏幕的最右侧。既然float:right在React中不存在，那么最好的方法是什么呢？
我做了一个名为serverNavButtonWrapper的包装器，试图在左边添加填充，但这看起来有点老套。我还尝试在两个h3标题周围添加一个包装器，然后执行flex-grow: 1，但这不起作用，最终将它们压缩成列。我将非常感谢你的帮助！
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
>
<AddIcon /> Server
</Button>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-09 02:45:18
如果您将flex项目上的边距设置为自动，它将增长到最大可用空间。因此，下面的代码将会起到作用：
.serverNav {
display: flex;
}
.serverNavButtonWrapper {
margin-left: auto;
}或者，如果您不再需要包装器：
.serverNav {
display: flex;
}
.serverNavButton {
margin-left: auto;
}Stack Overflow用户
发布于 2021-03-09 02:40:04
float属性是CSS属性的主要属性。
您可以通过style属性将样式表传递给React组件，例如：
<p style={{fontSize: "12px"}}>Text</div>这里有两个花括号，因为style的参数类型是一个对象，而您是在那里初始化它。
因此，您的代码应该如下所示：
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
style={{float: "right"}}
>
<AddIcon /> Server
</Button>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66535290
复制相关文章
相似问题
腾讯云开发者
