Span acting like div

Question

I have this code, where I planned to have three spans side by side displaying the step a person is at signing up for my website. However, the spans are acting like divs and going onto the next line. I have no idea why this is happening. To my understanding, the spans should only take up the width they need, not an entire line

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

//in seperate css file

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

.headerStep .descStep {
  display: inline;
}

I'm not sure if display: display; is a typo, but you would want display: inline-block and it should work fine. — Ricky Goldman, Dec 05 '15 at 06:13
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — user2455869, Dec 05 '15 at 14:15

score 4 · Accepted Answer · answered Dec 05 '15 at 06:16

4

You missed the comma(,) between .headerStep and .descStep. It should be like following.

.headerStep, .descStep {
    display: inline;
}

answered Dec 05 '15 at 06:16

Ibrahim Khan

20,616
7
42
55

score 1 · Answer 2 · answered Dec 05 '15 at 06:19

1

Because you are using h3 element inside span which takes all available width. Either replace h3 or set its maximum length

answered Dec 05 '15 at 06:19

Raider

137
8

Yep and the code is semantically incorrect by putting block elements inside inline elements. – Nathaniel Flick Dec 05 '15 at 07:14

score 0 · Answer 3 · answered Dec 05 '15 at 06:19

Here is the solution you are looking for

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

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

.headerStep .descStep {
  display: inline;
}

h3,p {
  display:inline;
}

score 0 · Answer 4 · answered Dec 05 '15 at 06:21

0

Try this: jsfiddle

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

.headerStep, .descStep {
  display: block;
}

answered Dec 05 '15 at 06:21

Sachin

963
11
31

Span acting like div

4 Answers4