将<a>对齐到div的右侧
将<a>对齐到div的右侧
提问于 2022-12-02 12:44:30
如何将包含按钮的<a>元素与字符串Push Me对齐到<div> (<Paper>)的右侧？
https://codesandbox.io/s/eager-noyce-j356qe
应用程序在´demo.tsx`文件中。
注意:我不能将按钮的位置设置为absolute，然后将其定位为right: 0px，因为我需要根据其内容(包括<Button>的高度)调整<div> (<Paper>)的高度。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-12-02 13:44:28
根据您的演示，我建议您将文本包装在<div>中，并为您的<Paper>提供display: flex属性。然后你可以在那个flex-gow: 2上使用div
<Paper style={{ display: 'flex' }}>
<div style={{ flexGrow: '2' }}>
<p>This is some text </p>
<p>This is even more text </p>
</div>
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
<Button
variant='contained'>
Push Me
</Button>
</Link>
</Paper>这是分叉式码箱
如果您不熟悉柔性盒，请使用更多
Stack Overflow用户
发布于 2022-12-02 12:51:37
若要将元素对齐到容器的右侧，可以在容器元素上使用文本对齐: right CSS属性。这将使容器内的所有元素与右侧对齐。
在您的示例中，您可以将文本对齐: right属性添加到元素中，这将使元素(包含元素)对齐到元素的右侧。
下面是一个如何做到这一点的例子：
import * as React from 'react';
import { Paper, Button } from '@material-ui/core';
function Demo() {
return (
<Paper style={{ textAlign: 'right' }}>
<a href="#">
<Button variant="contained">Push Me</Button>
</a>
</Paper>
);
}在这段代码中，textAlign：' right‘属性被添加到元素的样式属性中，它将元素(及其内部)对齐到元素的右侧。
注意，还可以使用元素的className属性应用包含文本对齐: right属性的CSS类，而不是直接将属性添加到样式属性中。这可以帮助您保持响应组件的整洁，并将样式与组件逻辑分离开来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74655983
复制相关文章
相似问题
腾讯云开发者
