拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 无法将按钮移动到右侧

无法将按钮移动到右侧

白鹭 - 2022-02-12 2129 0 0

我有问题,我无法将 div 中的物件(在这种情况下是按钮)移动到一侧。

我有这个HTML

      <div class='post-div'>
        <h1>There will be title</h1>
        <div class='post-content-and-actions'>
          <div class='peace-of-content'>
            <p>Here will be a little bit of content and Lorem ipsum</p>
          </div>
          <div class='actions'>
            <button class='edit'>EDIT</button>
            <button class='edit delete'>DELETE</button>
          </div>
        </div>
      </div>

并且css

.post-div {
  width: 1000px;
  height: 150px;
  padding: 8px;
  .post-content-and-actions {
    width: 100%;
    display: flex;
    .peace-of-content {
      width: 700px;
    }
    .actions {
      width: 300px;
      .edit {
        width: 100px;
        height: 30px;
        font-size: 15px;
        background-color: green;
        &.delete {
          background-color: red;
        }
      }
    }
  }
}

actions部分中,我想将所有按钮向右移动,无论我做什么,我都做不到。float: rightright: 0等等。其实,我不知道为什么!

uj5u.com热心网友回复:

您可以添加text-align: right;.actions

    ...
    .actions {
      width: 300px;
      text-align: right;
      ...

uj5u.com热心网友回复:

Flexbox 可以轻松实作这一点..

.actions {
    display: flex;
    justify-content: flex-end;
    width: 300px;
    .edit {
        width: 100px;
        height: 30px;
        font-size: 15px;
    }
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *