one letro and another title separates in the css

Question

one letro and another title separates in the css

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have a bad css code, 2 span one letter left and another title centero. css for each one

.mt {
  border: 1px solid#000;
  width: 350px;
  
}

.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
}

.mdesc {
  padding: 10px;
}

<div class="mt">
  
  <div class="mtitle">
    <span>A.</span><span>FOCOS DE INNOVACIÓN</span>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>

</div>

but a div, but with inline display

css

asked by Diego Sagredo 14.07.2017 в 17:55

source

2 answers

2

By having the spam tags you can assign them directly css classes

.mt {
  border: 1px solid#000;
  width: 350px;
  
}

.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
text-align: center;
}

.mdesc {
  padding: 10px;
} 
.big, .ml {display: inline;}
.big{ font-size: 25px; width: 10%; float: left;}
.ml {width: 88%; text-align: center;}

<div class="mt">
  
  <div class="mtitle">
    <div class="big">A.</div><div class="ml">FOCOS DE INNOVACIÓN</div>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>

</div>

answered by 14.07.2017 в 18:06

drag canvas with two canvas Problems with running phpmailer from ajax

score 1 · Accepted Answer

To solve it, you could do the following:

A mtitle tell you that the text within this center ( eg: text-align: center ) .
Create a new class, for example mchar and make it float to the left ( eg: float:left ) and assign it to span containing the letter A

So for example:

.mt {
  border: 1px solid#000;
  width: 350px;
}
.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
  text-align: center;
  line-height: 24px;
}
.mchar {
  float: left;
  font-size: 24px;
}
.mdesc {
  padding: 10px;
}

<div class="mt">
  <div class="mtitle">
    <span class="mchar">A.</span>
    <span>FOCOS DE INNOVACIÓN</span>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>
</div>