如何将'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

检查这一点，您可以简单地使用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 2

你可以尝试两种方法，

给出关闭按钮

1:

align-self: top right;

2:

给出关闭按钮

position: absolute

，然后将其定位为右距

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>

Answer 5

您可以将close-button类中的按钮移动到div和header类中，并将display:inline-flex更改为display:flex，如下所示。

display:flex而不是display: inline-flex，因为inline-flex会采取最小的宽度，所以你不会得到你想要的

@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, 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: 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">
<div>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>