div 右侧的按钮对齐箭头

Question

所以我正在尝试制作一个带有箭头的按钮，该箭头与框的末端对齐。

.profile-box {
  border: 1px solid #2E2E2E;
  border-radius: 0.5vw;
  width: 15vw;
  font-family: 'Open Sans', sans-serif;
  padding: 2vw;
  text-align: left;
  margin: 1vw;
}

.box-title {
  font-weight: bold;
  margin-bottom: 1vw;
}

.box-btn {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1vw;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

<div class="profile-box">
  <div class="box-title"> My orders </div>
  <button class="box-btn">
                    View orders
                    <i class="arrow"></i>
                </button>

问题是现在箭头与文本对齐，而不是与框的右侧对齐。有什么建议吗？

Answer 1

使用 flexbox space 文本和图标。此外，我将您的 HTML 更改为使用语义 HTML。我将无意义的 div 更改为有意义的 h2 元素，将其更改为您需要的任何标题。

.profile-box {
  border: 1px solid #2E2E2E;
  border-radius: 0.5vw;
  width: 15vw;
  font-family: 'Open Sans', sans-serif;
  padding: 2vw;
  text-align: left;
  margin: 1vw;
}

.box-title {
  font-weight: bold;
  margin-bottom: 1vw;
}

.box-btn {
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 1vw;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

<div class="profile-box">
  <h2 class="box-title"> My orders </h2>
  <button class="box-btn">
    View orders
    <i class="arrow"></i>
  </button>
</div>

div 右侧的按钮对齐箭头

Button align arrow at the right of div

html

css

alignment