我试着让我的头脑围绕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>
5条答案
按热度按时间myzjeezk1#
选中此选项,您可以简单地使用
display:flex;
和justify-content:space-between;
uyhoqukh2#
你可以尝试两件事,
按关闭按钮
第一章:
align-self: top right;
二:
按下关闭按钮
position: absolute
然后将其放置在右边距
zpgglvta3#
您可以向当前的close-button元素添加一个float选项:
zynd9foi4#
你得试试这个我觉得这是你案子的最佳解决方案
91zkwejq5#
您可以将带有
close-button
类的按钮移动到带有header
类的div
中,并将display:inline-flex
更改为display:flex
,如下所示。display:flex
而不是display: inline-flex
,因为inline-flex
将占用它所能占用的最小宽度,因此您将无法获得所需的内容。