如何将“X”按钮移动到右侧的末尾（与文本左侧对齐）？

Question

我试图让我的头脑了解 CSS 并练习我所学到的东西。 我在笔记上来回搜索，到处搜索，尝试了模块中提供的解决方案，但仍然没有达到预期的解决方案。 我一直在尝试将“x”按钮向右移动，如下图所示。 下面是html和css代码：

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); html, body { height: 100%; } body { font-family: Roboto, sans-serif; margin: 0; background: #aaa; color: #333; /* I'll give you this one for free lol */ display: flex; align-items: center; justify-content: center; } .modal { background: white; width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); display: inline-flex; padding: 8px 8px; } .left-side, .right-side { margin: 8px; } .icon { color: royalblue; font-size: 26px; font-weight: 700; background: lavender; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header { display: inline-flex; align-items: center; justify-content: space-between; } .close-button { background: #eee; border-radius: 50%; color: #888; font-weight: 400; font-size: 16px; height: 24px; width: 24px; display: inline-flex; align-items: center; justify-content: center; } button { padding: 8px 16px; border-radius: 8px; } button.continue { background: royalblue; border: 1px solid royalblue; color: white; } button.cancel { background: white; border: 1px solid #ddd; color: royalblue; }

 <div class="modal"> <div class="left-side"> <div class="icon">!</div> </div> <div class="right-side"> <div class="header">Are you sure you want to do that?</div> <div class="close-button">✖</div> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <button class="continue">Continue</button> <button class="cancel">Cancel</button> </div> </div>

Answer 1

你可以尝试两件事，

给出关闭按钮

1：

align-self: top right;

2：

给出关闭按钮

position: absolute

然后用右边距定位它

Answer 2

检查这个你可以简单地使用display:flex; 和justify-content:space-between;

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); html, body { height: 100%; } body { font-family: Roboto, sans-serif; margin: 0; background: #aaa; color: #333; /* I'll give you this one for free lol */ display: flex; align-items: center; justify-content: center; } .modal { background: white; width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); display: inline-flex; padding: 8px 8px; } .left-side, .right-side { margin: 8px; } .right-header{ display:flex; justify-content:space-between; } .icon { color: royalblue; font-size: 26px; font-weight: 700; background: lavender; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header { display: inline-flex; align-items: center; justify-content: space-between; } .close-button { background: #eee; border-radius: 50%; color: #888; font-weight: 400; font-size: 16px; height: 24px; width: 24px; display: inline-flex; align-items: center; justify-content: center; } button { padding: 8px 16px; border-radius: 8px; } button.continue { background: royalblue; border: 1px solid royalblue; color: white; } button.cancel { background: white; border: 1px solid #ddd; color: royalblue; }

 <div class="modal"> <div class="left-side"> <div class="icon">!</div> </div> <div class="right-side"> <div class="right-header"> <div class="header">Are you sure you want to do that?</div> <div class="close-button">✖</div> </div> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <button class="continue">Continue</button> <button class="cancel">Cancel</button> </div> </div>

Answer 3

您可以为当前的关闭按钮元素添加一个浮动选项：

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float:right;
}

Answer 4

您需要尝试一下，我认为这是适合您情况的最佳解决方案

 <style>
    .modal {
      background: white;
      width: 480px;
      border-radius: 10px;
      box-shadow: 2px 4px 16px rgba(0,0,0,.2);
      display: inline-flex;
      padding: 8px 8px;
      position: relative;
    }
    .close-button {
      background: #eee;
      border-radius: 50%;
      color: #888;
      font-weight: 400;
      font-size: 16px;
      height: 24px;
      width: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    </style>