Question

我有这个代码，我计划有三个并排显示一个人正在注册我的网站的步骤。但是，跨度就像div一样，然后进入下一行。我不知道为什么会这样。根据我的理解，跨度应该只占用他们需要的宽度，而不是整行

      <div class="row stepRow">
    <div class="col-12-md ">
      <div id="stepDisplay">
        <span class="stepBlock">
          <h3 class="headerStep">Step 1</h3>
          <p class="descStep">Basic Details</p>
        </span>
        <span class="stepBlock">
          <h3 class="headerStep">Step 2</h3>
          <p class="descStep">More Details</p>
        </span>
        <span class="stepBlock">
          <h3 class="headerStep">Step 3</h3>
          <p class="descStep">Payment Details</p>
        </span>
      </div>
    </div>

  </div>

//在单独的css文件中

.stepBlock {
  display: display;
  text-align: center;
}

.headerStep .descStep {
  display: inline;
}

Answer 1

您错过了import( "fmt" "./users" )和comma(,)之间的.headerStep。应该如下。

.descStep

Answer 2

因为你在span中使用了h3元素，它占用了所有可用的宽度。替换h3或设置其最大长度

Answer 3

以下是您正在寻找的解决方案

      <div class="row stepRow">
<div class="col-12-md ">
  <div id="stepDisplay">
    <span class="stepBlock">
      <h3 class="headerStep">Step 1</h3>
      <p class="descStep">Basic Details</p>
    </span>
    <span class="stepBlock">
      <h3 class="headerStep">Step 2</h3>
      <p class="descStep">More Details</p>
    </span>
    <span class="stepBlock">
      <h3 class="headerStep">Step 3</h3>
      <p class="descStep">Payment Details</p>
    </span>
  </div>
</div>

CSS代码

.stepBlock {
  display: display;
  text-align: center;
}

.headerStep .descStep {
  display: inline;
}

h3,p {
  display:inline;
}

Answer 4

试试这个：jsfiddle

.stepBlock {
  display: inline-block;
  text-align: center;
  width: 30%;
}

.headerStep, .descStep {
  display: block;
}

跨度表现得像div

4 个答案: