css 如何将“X”按钮移动到右侧的末尾(与文本的左侧内联)？

xoefb8l8  于 2023-02-14  发布在  其他
关注(0)|答案(5)|浏览(139)

我试着让我的头脑围绕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>
css

5条答案

按热度按时间
myzjeezk

myzjeezk1#

选中此选项，您可以简单地使用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>
赞(0）分享  回复(0）举报  2023-02-14
uyhoqukh

uyhoqukh2#

你可以尝试两件事，
按关闭按钮
第一章：
align-self: top right;
二：
按下关闭按钮
position: absolute
然后将其放置在右边距

赞(0）分享  回复(0）举报  2023-02-14
zpgglvta

zpgglvta3#

您可以向当前的close-button元素添加一个float选项：

.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;
}
赞(0）分享  回复(0）举报  2023-02-14
zynd9foi

zynd9foi4#

你得试试这个我觉得这是你案子的最佳解决方案

<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>
赞(0）分享  回复(0）举报  2023-02-14
91zkwejq

91zkwejq5#

您可以将带有close-button类的按钮移动到带有header类的div中，并将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>
赞(0）分享  回复(0）举报  2023-02-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com