全宽按钮右侧的浮动图标答案

【问题标题】：Float icon right on full width button全宽按钮右侧的浮动图标
【发布时间】：2022-11-30 06:46:03
【问题描述】：

所以我可能太笨了，看不到修复方法，这可能很简单，但我不是很有经验。

我有一个带有文本的全宽按钮和一个深色背景颜色的图标。我希望文本始终居中，并且我希望图标和较暗的背景颜色始终浮动在右侧。

我如何实现这一目标？

https://codepen.io/MrBlack99/pen/QWxVjxY

HTML:

<button type="button" class="button">
  <span class="button__text">Vergelijk 8 Prijzen</span>
  <span class="button__icon">
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </span>
</button>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

CSS：

.button {
  display: flex;
  height: 50px;
  padding: 0;
  background: #1e3c72;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background: #234583;
}

.button:active {
  background: #234583;
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  height: 100%;
  float: right;
}

.button__icon {
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.08);
  float: right;
}

【问题讨论】：

标签： html css button flexbox

【解决方案1】：

按钮有display: flex，浮动不适用于像图标这样的弹性项目。但是你可以简单地将margin-left: auto;添加到.button__icon，这将在 flex parent 中尽可能向右移动它。

.button {
  display: flex;
  height: 50px;
  padding: 0;
  background: #1e3c72;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background: #234583;
}

.button:active {
  background: #234583;
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  height: 100%;
  float: right;
}

.button__icon {
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.08);
  margin-left: auto;
}

<button type="button" class="button">
  <span class="button__text">Vergelijk 8 Prijzen</span>
  <span class="button__icon">
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </span>
</button>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

【讨论】：