我如何创建一个div /按钮，里面有堆叠的文本？

Question

我一直试图弄清楚如何在CSS中产生它：

但是，到目前为止，当我尝试过此功能时，它只是部分进入了轨道：

如何修复以下CSS和HTML，使其能够正确用作堆叠式文本计量器？我有Bootstrap，并且正在使用SCSS / SASS。

使用相同代码（包括完整菜单）的笔会出现相同问题： https://codepen.io/anon/pen/zLYWZR

.buFontSize {
    font-size: 11px;
    padding: 0px;
}

.pointButton {
    display: block;
    border: rgba(255, 255, 255, 0.534) 1px solid !important;
    justify-content: center;
    padding: 0px !important;
}

.buttonBlock {
    display: block;
}

  <nav class="navbar navbar-expand navbar-dark">
  

  <div class="navbar" id="navbarText">
    <a class="navbar-brand navBrand" href="#">Link One</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link Three</a>
      </li>
    </ul>

  <ul class="navbar-nav float-right">
      <span class="btn pointButton">
        <div class="buttonBlock">
            <div class="row">
                <span class="buFontSize">Games</span>
            </div>
            <div class="row">
                <span class="buFontSize">100000</span>
            </div>
        </div>
      </span>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas faSize fa-user-friends"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="far faSize fa-envelope"></i></a>
      </li>
    </ul>      
</div>
  </nav>

Answer 1

您可以将按钮组与br一起使用：

body {
  background-color: black !important; /* test only */
}

.btn-group .btn {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  line-height:1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <div class="btn">
    Games<br>
    10000
  </div >
  <div class="btn">
    Points<br>
    000000
  </div >
</div>

Example bootply

Answer 2

.buFontSize {
    font-size: 11px;
    color: #fff;
    padding: 0px;
}

.pointButton {
    display: block;
    border: rgba(255, 255, 255, 0.534) 1px solid;
    background: #000;
    justify-content: center;
    padding: 0px;
}

.buttonBlock {
    display: block;
    padding: 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<span class="btn pointButton">
  <div class="buttonBlock">
    <div class="row mb-2">
        <div class="col-md-12">
           <span class="buFontSize">Games</span>
        </div>
        <div class="col-md-12">
           <span class="buFontSize">100000</span>
        </div>
    </div>
  </div>
</span>

Answer 3

尝试

body{
  background-color: black;
}
.buttonBlock{
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid white;
	width: 120px;
	text-align: center;
	display: inline-block;
  color: white;
}

.buttonBlock > span{
	display: block;
}

.buttonBlock:first-child{
	border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-ms-border-radius: 5px 0 0 5px;
	-o-border-radius: 5px 0 0 5px;
}

.buttonBlock:last-child{
	border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-ms-border-radius: 0 5px 5px 0;
	-o-border-radius: 0 5px 5px 0;
}

.buttonBlock:not(:first-child){
	border-left: 0;
}

<span class="btn pointButton">
		<div class="buttonBlock">
			<span class="title">First</span>
			<span class="points">100000</span>
		</div>
		<div class="buttonBlock">
			<span class="title">Second</span>
			<span class="points">100000</span>
		</div>
		<div class="buttonBlock">
			<span class="title">Third</span>
			<span class="points">100000</span>
		</div>
		<div class="buttonBlock">
			<span class="title">Fourth</span>
			<span class="points">100000</span>
		</div>
		<div class="buttonBlock">
			<span class="title">Fifth</span>
			<span class="points">100000</span>
		</div>
	</span>

Answer 4

也许使用

.somewrapperclass{
    display: flex;
    flex-flow: wrap row;
    align-items: flex-start;
}

请勿使用显示块，因为还有更好的选择，请选中此complete guide to flexbox