Question

我有一个“票证”组件。在某些情况下，有一些信息，按钮和通知。并且该通知有一个箭头，我应该与按钮的底部中心对齐。问题是按钮具有不同的宽度，因为我们的网站翻译成几种语言并且按钮文本长度发生变化。我找到百分比但失败了，我不知道如何解决它。

票证结构：

    .ticket {
  border: 1px dashed gray;
  border-radius: 3px;
}

.ticket__content {
  padding: 0.5rem 1rem;
}

.button {
  border-radius: 3px;
  border: 0;
  padding: 1rem 1.5rem;
  background-color: darkslateblue;
  text-align: center;
  min-width: 180px;
  max-width: 100%;
  width: auto;
  display: inline-block;
  color: #FFFFFF;
  font-size: 1rem;
}

.notification {
  margin-top: 2rem;
}

.notification__content {
  background-color: gold;
  padding: 1.5rem;
  text-align: left;
}

.notification__arrow-container {
  width: 75%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.notification__arrow::after {
  top: -1rem;  
  right: 0;
  position: absolute;
  border-bottom-color: gold;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-right: 1rem solid transparent;
  border-bottom-width: 1rem;
  border-bottom-style: solid;
  border-left: 1rem solid transparent;
}

.align-right {
  text-align: right;
}

<div class="ticket">
  <div class="ticket__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="align-right">
      <button class="button">Do it</button>
    </div>
  </div>

  <div class="notification">
    <div class="notification__arrow-container">
      <div class="notification__arrow">
      </div>
    </div>
    <div class="notification__content">
      Some notification
    </div>
  </div>
</div>

没有JS可以解决这个问题吗？

Answer 1

我认为你正在寻找这个：

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.wrap {
  text-align: right;
}

.button {
  border: 0;
  padding: 1rem 1.5rem;
  background-color: darkslateblue;
  text-align: center;
  min-width: 180px;
  max-width: 100%;
  width: auto;
  display: inline-block;
  color: #FFFFFF;
  font-size: 1rem;
  position: relative;
}

.notification {
  background-color: gold;
  padding: 1.5rem;
  text-align: left;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.notification::after {
      border-bottom: 5px solid gold;
      content: '';
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      top: -5px;
      left: 50%;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
  }

    <div class="ticket">
      <div class="ticket__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <div class="align-right">
          <button class="button">Do it
             <div class="notification">Some Notification</div>
          </button>    
        </div>
      </div>
    </div>

诀窍是将通知作为按钮的子元素并将其绝对定位在底部中心。然后在该通知的中间添加箭头将始终将该箭头放在按钮的中间。

将CSS箭头与按钮的底部中心对齐

1 个答案: