Wielkość tła znacząca od znaków

wersja skryptu MyBB:Najnowsza
adres forum: www.Project-RP.pl
na czym polega problem (screen, opis, komunikaty): A więc tak, mam taki kod w szablonie index_stats

<div class="statystyki" style="margin-top: 0px;" original-title="">
<span class="smalltext">
<center>  <ul>
<li>Total Posts: <div class="statystykitlo">{$stats['numposts']}</div></li>

<li>Total Threads: <div class="statystykitlo">{$stats['numthreads']} </div></li>

<li>Members: <div class="statystykitlo">{$stats['numusers']}</div></li>

<li>Most Online: <div class="statystykitlo">{$mostonline['numusers']}</div></li>

<li>Newest Member: <div class="statystykitlo">{$stats['lastusername']}</div> </li>
  
  </ul></center>
</span>
  </div>

oraz do niego css w globalu

.statystyki {
        color: #000;
        margin: auto;
        padding: 0;
        height: 38px;
}

.statystyki ul {
      list-style: none;
      display: inline-block;
      margin: 0 0 0 25px;
      padding: 0;
      text-align: center;
      height: 60px;
      line-height: 30px;
}

.statystyki li {
      list-style: none;
      display: inline-block;
      margin: 0 0 0 25px;
      padding: 0;
      text-align: center;
      height: 60px;
      line-height: 30px;
}

.menu ul a:link, .menu ul a:visited {
        padding: 0px;
          color: #c2c5d3;
          text-shadow: 0px 0px 0px #1f2027;
}

.menu ul a:hover, .menu ul a:active {
        color: #fff;
        text-shadow: 0px 0px 0px #1f2027;
}

.statystykitlo {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #fff;
  height: 25px;
  font-size: 12px;
  text-shadow: none;
}

Chodzi mi teraz o to, aby to tło dopasowywało się do ilości znaków. Np jeśli jest cyfa 2 to jest mniejsze to tło niż napis "jakiśtamgracz". A i jeszcze chce, aby się centrowało względem wysokości.

---

help!

odświeżam

Zamień swój kod na:

<div class="statystyki" style="margin-top: 0px;" original-title="">
<span class="smalltext">
<center>
<ul>
<li><p>Total Posts:</p> <div class="statystykitlo">{$stats['numposts']}</div></li>
<li><p>Total Threads</p>: <div class="statystykitlo">{$stats['numthreads']} </div></li>
<li><p>Members:</p> <div class="statystykitlo">{$stats['numusers']}</div></li>
<li><p>Most Online:</p> <div class="statystykitlo">{$mostonline['numusers']}</div></li>
<li><p>Newest Member:</p> <div class="statystykitlo">{$stats['lastusername']}</div> </li>
</ul>
</center>
</span>
</div>

I następnie zamień klasę statystykitlo na:

.statystykitlo {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #fff;
  height: 25px;
  font-size: 12px;
  text-shadow: none;
display:inline-block;
padding:0 10px;
}

.statystyki p {
margin:0;
}

Poprzednio klasa dziedziczyła blokowe wyświetlanie elementu (display:block), czyli na całą szerokość diva - dlatego zmieniłem typ na inline-block. W ten sposób tło nie jest już rozciągane ale wyświetla się w jednej linii ze wszystkimi elementami. Żeby przenieść je na dół dodałem znaczniki <p> w kodzie, które odpowiadają za wyświetlanie elementów w linii. Znaczniki automatycznie dodają margines, więc również usunąłem je za pomocą CSS. Powinno działać.