Question

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

也许还有其他任何我失踪的方式？

提前谢谢。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

My result

Answer 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>

无法内联阻止两个跨度

1 个答案: