CODEWITHSUNDEEP
htmlcss
code-8
code-8

Reputation: 58810

How can I place multiple spans in the same line?

I'm trying to achieve this UI here.

enter image description here

So I created 4 spans set them to float left and display inline block. Nothing seem to work !

CSS

<style type="text/css">


 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}

.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  padding: 5px 20px;
  float: left;
}

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline;
}


</style>

HTML

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 sa-section" style="border-right: 2px solid #c9cacb;">

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span id="sa-section-num" class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>

          <div class="col-xs-6 col-lg-6">
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <div class="sa-right-items">
           <span class="sa-answer">
            <span> 11/25 <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>

          <span class="sa-score">
           <span> 44% <br> <span class="sa-h6">SCORE</span> </span>
         </span>

         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse"  class="pull-right">
            <img width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span> <span class="sa-h6">VIEW REPORT</span> </span>
          </span>
        </span>

      </div>

    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     Contents

   </div>
 </div>
</div>

Result

enter image description here

They're stack horribly on top of each others.

How do I stop that and achieve what I want ?

Any hints / suggestions will be much appreciated !

Here is my Fiddle - if you need it.

Upvotes: 3

Views: 8014

Answers (3)

rageit
rageit

Reputation: 3621

Just for your reference you can use Bootstrap grid and clean up your HTML and CSS a lot. For arranging your items in the format you want you can do the following:

<div class="row panel">
    <div class="col-xs-3">
        <span class="sa-h2">11/25</span>
        <span class="sa-h6">ITEMS ANSWERED CORRECTLY</span>
    </div>
    <div class="col-xs-3">
        <span class="sa-h2"> 44% </span> 
        <span class="sa-h6">SCORE</span>
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/tf27pu3el/review_white.png" />
        <span class="sa-h6">REVIEW</span> 
    </div>
    <div class="col-xs-3">
        <img width="40px" src="http://s6.postimg.org/4ag99ja9p/report_white.png" />
        <span class="sa-h6">VIEW REPORT</span>
    </div>
</div>

With CSS:

 .panel {
    border-radius: 0px !important;
    background-color: #4D8FCB;
    color: white;
    margin-left: 25px;
    margin-right: 25px;
    padding: 10px 0;
    text-align: center;
}
.sa-h2, .sa-h6 {
    display: block;
}
.sa-h2 {
    font-size: 28px;
}
.sa-h6 {
    font-size: 10px;
}

Refer to this JsFiddle for output.

Upvotes: 1

Kate Moore
Kate Moore

Reputation: 11

change display:inline; to display:inline-block;

.sa-answer, .sa-score, .sa-review, .sa-report {
  vertical-align: middle;
  display: inline-block;
}

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Change this style:

.sa-answer, .sa-score, .sa-review, .sa-report {
   display: inline;
}

… to this:

.sa-answer, .sa-score, .sa-review, .sa-report {
  display: inline-block;
}

You'll also probably want to add text-align: center; and some padding.

Fiddle

Upvotes: 4

Related Questions