按钮上的数字部分

Question

我正在尝试创建一个如下所示的按钮：

棘手的部分是让数字“适合”按钮内部。这就是我设置按钮的方式：

<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>

这是我的CSS：

.textclass {
  width: 90px;
  height: 30px;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 20px;
}

.numberclass {
  background-color: blue;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  height:30px;
  width: 30px;
  border-radius: 2px 0 0 2px;
}

设置数字的高度和宽度似乎是不必要的，除非我进入非常理想的非常具体的定位，否则我无法正确排列数字。我在哪里错了？

普拉克：

http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview

Answer 1

尝试这样定义您的.textclass position:relative;overflow:hidden;和.numberclass line-height:30px;，如下所示

＆＃13;

＆＃13;

/* Styles go here */

.textclass {
  width: 90px;
  position:relative;
  overflow:hidden;
  height: 30px;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 20px;
}

.numberclass {
  background-color: blue;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  height:30px;
  width: 30px;
  line-height:30px;
  border-radius: 2px 0 0 2px;
}

＆＃13;

<div>
    <button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
  </div>

＆＃13;

＆＃13;

＆＃13;

或者您只需将按钮定义为span标签，就像这样

＆＃13;

＆＃13;

.textclass {
  width: 90px;
  position:relative;
  overflow:hidden;
  display:inline-block;vertical-align:top;text-align:center;
  height: 30px;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
  line-height: 30px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 20px;
}

.numberclass {
  background-color: blue;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  height:30px;
  width: 30px;
  line-height:30px;
  border-radius: 2px 0 0 2px;
}

＆＃13;

<div>
    <span class="textclass"><span class="numberclass">33</span>Text</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需position: relative; .textclass和line-height: 30px; .numberclass

<强> Updated Plunker

Answer 3

试试这个（替换它）

.numberclass {
    background-color: blue;
    color: #FFF;
    position: absolute;
    left: 9px;
    top: 8px;
    height: 20px;
    padding-top: 9px;
    width: 30px;
    border-radius: 2px 0 0 2px;
}

Answer 4

你可以尝试这个：

.textclass {
  width: 140px;
  position:relative;
  overflow:hidden;
  height: 40px;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 15px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 30px;
}

.numberclass {
  background-color: blue;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  height:40px;
  width: 40px;
  line-height:35px;
  border-radius: 2px 0 0 2px;
}

DEMO HERE

Answer 5

请参阅数字部分的working plunker 以及完全自动调整高度。您甚至不需要应用行高。

<强> HTML

<button type="text" class="textclass">
    <span class="numberclass">
        <span class="container"><span class="inner">33</span></span>
    </span>
    Text
</button>

<强> CSS

.textclass {
  width: 90px;
  height: 30px;
  position: relative;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 20px;
}

.numberclass {
  background-color: blue;
  color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  border-radius: 2px 0 0 2px;
  display: block;
}

.container {
  display: table;
  height: 100%;
  text-align: center;
  width: 100%;
}

.inner {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

Answer 6

更改.numberclass类

/* Styles go here */

.textclass {
  width: 90px;
  height: 30px;
  background-color: #FFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 2px;
  padding-left: 20px;
}

.numberclass {
 background-color: blue;
    border-radius: 1px 0 0 1px;
    color: #fff;
    left: 8px;
    padding: 8px;
    position: absolute;
    top: 9px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div>
    <button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
  </div>
</body>

</html>