创建多个背景按钮

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

button {
  position: absolute; 
  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;
}

位置为relative的元素；相对于其正常位置定位。

设置位置相对的元素的top，right，bottom和left属性将导致将其调整为偏离其正常位置。其他内容将不会进行调整以适合元素所留的任何空隙。

位置为absolute的元素；相对于最近的祖先定位（而不是相对于视口定位，如固定）。

但是；如果绝对定位的元素没有祖先，它将使用文档正文，并随页面滚动一起移动。

Answer 3

您可以使用display: grid放置项目并使它们垂直和水平居中，并使用linear-gradient控制颜色。它是自动响应的，并且可以与您为height的{​​{1}}或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 ）。