Question

有一个包含一些按钮组的div。

.main-div {
    display: flex;
    .second-div {
                 //what to write here?
     }
}

<div class="main-div>
    //other divs
    <div class="second-div">
        <div>some button</div>      
        <div>some button</div>
    </div>
</div>

我希望位于此div内的按钮组位于该行的右端。

我尝试了多个选项，例如：float: right;，justify-content: end;，margin-right: 0px，但没有一个具有想要的效果。

有什么想法吗？

Answer 1

使用justify-content: flex-end;

.main{
display:flex;
justify-content: flex-end;
}

<div class="main">
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
  <button type="button">Click Me!</button>
</div>

Answer 2

只需将margin-left: auto;添加到您希望tyo右对齐的flex元素内的元素即可。

.main-div {
  display: flex;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="main-div" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary" style="margin-left: auto;">Right</button>
</div>

将按钮组与div的右端对齐

2 个答案: