时间戳

首页 > 解决方案 > 将按钮放在 div 的右侧

html - 将按钮放在 div 的右侧

问题描述

这是我的屏幕的样子：

橙色按钮应位于“dashboard-detail-body”的右侧，并且在顶部、左侧和底部都有边距（“dashboard-container”） 在此处输入图像描述

这是我尝试过的：

   <div class="dashboard-detail-body">

        <div style="float: right; margin-right: 10px; margin-top: 15px;">
            {{ui-5/button label="click me"}}
        </div>
        <div class="dashboard-container">

但我没有得到想要的行为 - 底部没有边距（橙色按钮与底部 div 重叠） 在此处输入图像描述

margin-bottom，没有解决它，我怎样才能得到想要的行为？

标签： htmlcss

解决方案

问题在于float: right;风格。这使得元素重叠。你可以通过使用 flex-box 来解决这个问题，代码如下：

.dashboard-detail-body{
    display: flex;
    flex-direction:column;
}
.align-right{
    align-self: flex-end;
}

<div class="dashboard-detail-body">
    <div class="align-right">
        I am right
    </div>
    <div class="dashboard-container">
        <p>a<p>
        <p>b<p>
        <p>c<p>
    </div>
</div>

推荐阅读