basti1012.bplaced.net

Für mich ist sowas div Suppe. Weil es viele unnötige divs enthält die keiner brauch

Code

                                    
                                <style>
  #all{
height:50px;
  width:260px;
  display:flex;
}
.start{
  display:flex;
  font-size:30px;
  margin:0 auto;
  width:50px;
  border:1px solid red;
}
h2,h3{
  text-align:center;
}

p>span:before,p>span:after{
  content:'-';
  
}
p>span{
  font-size:30px;
  margin:0 auto;
  width:50px;
  display:inline-block;
  border:1px solid red;
}
  </style>

<h2>Das ist für mich div Suppe</h2>
<div id="all">
<div class="start" id="a"><div class="vor">-</div>S<div  class="nach">-</div></div>
<div class="start" id="b"><div class="vor">-</div>U<div  class="nach">-</div></div>
<div class="start" id="c"><div class="vor">-</div>P<div  class="nach">-</div></div>
<div class="start" id="d"><div class="vor">-</div>P<div  class="nach">-</div></div>
<div class="start" id="e"><div class="vor">-</div>E<div  class="nach">-</div></div>
</div>
<h3>Weil es auch so geht</h3>


<p>
  <span>S</span>
   <span>U</span>
   <span>P</span>
   <span>P</span>
   <span>E</span>
</p>