创建多个背景按钮

Question

我正在尝试做一个具有双重背景的按钮，一个包含图标(具有固定宽度(的按钮，其余部分是普通文本。

我现在得到的是：

.button {
  position: relative;
  display: inline-block;
  background-color: red;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}
span {
  background-color: blue;
  position: absolute;
  left: 0;
  width: 30px;
  text-align: center;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="button">
  <span>x</span> Test
</div>
<div class="button">
  <span><i class="fas fa-address-card"></i></span> Test
</div>

该方法的问题是底部显示了一个 1px 边框，并且作为方法似乎不是很稳定。如何干净利落地达到此效果？谢谢

Answer 1

将跨度的高度设置为 100%

.button {
  position: relative;
  display: inline-block;
  background-color: red;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}
span {
  background-color: blue;
  position: absolute;
  left: 0;
  height:100%;
  width: 30px;
  text-align: center;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="button">
  <span>x</span> Test
</div>
<div class="button">
  <span><i class="fas fa-address-card"></i></span> Test
</div>

Answer 2

您可以使用display: grid来放置项目并使它们垂直和水平居中，并使用linear-gradient来控制颜色。它是自动响应的，并将与您申请的所有值一起使用 height 或width .button .

.button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: center;
  background: linear-gradient(to right, lightblue 50%, lightcoral 50%);
  
  /* styling */
  width: 100px;
  height: 30px;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div class="button">
  <span>x</span> 
  Test
</div>
<br>
<div class="button">
  <i class="fas fa-address-card"></i>
  Test
</div>

如果您希望图标部分或标签部分具有一定大小，只需grid-template-columns分别更改为grid-template-columns: 25% 75%;和linear-gradient(background: linear-gradient(to right, lightblue 25%, lightcoral 75%)(。