不能内联阻止两个跨度答案

【问题标题】：Can't inline-block two span不能内联阻止两个跨度
【发布时间】：2016-12-31 10:08:22
【问题描述】：

我一直试图将这两个跨度类放在一起，但没有任何好的结果。

也许还有其他我想念的方式？

提前谢谢你。

.numbered {
  width: 45px;
  height: 45px;
  background-color: #c61274;
  border-radius: 50%;
  font-size: 17px;
  padding-top: 13px;
  margin-top: 40px;
}
.titled {
  color: #444949;
  font-size: 18px;
  font-weight: bolder;
  display: inline-block;
  /* to make it inline */
  vertical-align: middle;
}

<div class="row">
  <div class="col-md-4">
    <span class="badge numbered">1</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
  <div class="col-md-4">
    <span class="badge numbered">2</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
  <div class="col-md-4">
    <span class="badge numbered">3</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
</div>

My result

【问题讨论】：

我认为您不需要为 .titled 显示内联块。这就是导致问题的原因。

标签： html css twitter-bootstrap alignment

【解决方案1】：

.titled 跨度已经是inline..无需将其设置为inline-block 并且.numbered 跨度的上边距也是不必要的。

.numbered {
        width: 45px;
        height: 45px;
        background-color: #c61274;
        border-radius: 50%;
        font-size: 17px;
        padding-top: 13px;
        margin: 4px;
}

.titled {
    color: #444949;
    font-size: 18px;
    font-weight: bolder;
    vertical-align: middle;
}

Codepen Demo

.badge.numbered {
  width: 45px;
  height: 45px;
  background-color: #c61274;
  border-radius: 50%;
  font-size: 17px;
  padding-top: 13px;
  margin: 4px;
}
.titled {
  color: #444949;
  font-size: 18px;
  font-weight: bolder;
  vertical-align: middle;
}

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

<div class="row">
  <div class="col-md-4">
    <span class="badge numbered">1</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
  <div class="col-md-4">
    <span class="badge numbered">2</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
  <div class="col-md-4">
    <span class="badge numbered">3</span><span class="titled">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aliquam, ducimus, ullam unde expedita ex sapiente maxime deleniti eaque nesciunt placeat alias nostrum itaque voluptates ipsum odio sequi cum reiciendis.</p>
  </div>
</div>

【讨论】：