时间戳

首页 > 解决方案 > 如何对齐面板右下角的按钮

html - 如何对齐面板右下角的按钮

问题描述

我有这个 CSS 代码：

  .mainBody {
    border: 1px solid rgba(0, 0, 0, 0.87);
    width: 895px;
    position: relative;
    display: inline-block;
    padding-bottom: 8rem;
    top: 40px;
    height: 310px;
   }

 .label {
    display: inline-block;
    margin-left: 1%;
    position: relative;
    bottom: 10px;
    float: left;
    z-index: 2;
    background: white;
   }

  .dropdown {
    padding-left: 1%;
    width: 100%;
    margin: 1rem 0;
    display: flex;
    align-items: center;
   }

   .paragraph {
     position: relative;
     display: inline-block;
     width: 800px;
     padding-bottom: 30px;
     padding-left: 10px;
    }

    .expandedLink {
      display: flex;
      flex-direction: column;
      padding: 1rem 10rem;
    }

    .previousButton {
      position: relative;
      top: 77px;
      float: right;
    }

    .nextButton {
      position: relative;
      top: 77px;
      float: right;
    }

HTML:

   <div className="mainBody">
    <div className="label"></div>
    <div className="dropdown"></div>
    <div className="paragraph"></div>
    <div className="expandedLink"></div>
    <div className="nextButton"></div>
    <div className="previousButton"></div>
   <div>

我想在mainBody的右下角对齐nextButton和previousButton。问题是我不能使用 margin-top，因为我使用的是扩展组件，而 mainBody 中的内容没有稳定的大小。有任何想法吗？

标签： htmlcssreactjsstyles

解决方案

将此行添加到 .mainBody 

display: flex;
align-items: flex-end;
justify-content: flex-end;

推荐阅读