CODEWITHSUNDEEP
htmlcss
code-8
code-8

Reputation: 58810

What is the best way to make your text stay in the same line as your icons?

I'm trying to achieve this UI here

enter image description here

I've tried

CSS

<style type="text/css">

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262 ;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}



</style>

HTML

<div class="row cb-key-row ">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-danger" ></div>
    <span> &lt; 50% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-warning" ></div>
    <span> 50% UP TO 75% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-success" ></div>
    <span> &gt; OR EQUAL TO 75% CLASS AVERAGE SCORE </span>
  </div>
</div>

Result

enter image description here

How can I make my texts stay next to my icons ?

JSFiddle

Upvotes: 1

Views: 70

Answers (2)

Griva
Griva

Reputation: 1738

You can do it with:

1 display: inline-block;

Your container behaviour like chars (ex. span) You can fix position with with line-height.

#cb-key-danger {
    width: 15px;
    height: 15px;
    background-color: #F46E4E;
    display: inline-block;
}

or set margin-left for your span and: set background icon / set postion absolute

Examples http://jsfiddle.net/kgk2yrs9/1/

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

You need to set display: inline-block for squares divs:

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
  display: inline-block;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262;
  display: inline-block;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
  display: inline-block;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}

Upvotes: 3

Related Questions