Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Вывод результатов голосования

1 ТЕМА 16
2 Шанхай 14
3 ASIA 9
4 The Chaikhana 8
5 Шницель-Хаус 2
6 Регистан 1
7 Мюнхаузен 1
Исходный код этого примера:
<style>
.places div {
    position: relative;
    padding: 0 50px 14px 20px;
    width: 800px;
}
.places div .place {
    color: #999999;
    position: absolute;
    top: 0; left: 0;
}
.places div .votes {
    color: #F45E65;
    font-size: 12px;
}
.places div hr {
    display: block;
    text-align: left;
    border: 0;
    margin: 4px 0;
    width: 100%;
    height: 3px;
    color: #EB2C3E;
    background: #EB2C3E;
}
</style>

<div class="places">
    <div>
        <span class="place">1</span>
        ТЕМА <span class="votes">16</span>
        <hr style="width: 100%;">
    </div>
    <div>
        <span class="place">2</span>
        Шанхай <span class="votes">14</span>
        <hr style="width: 87.5%;">
    </div>
    <div>
        <span class="place">3</span>
        ASIA <span class="votes">9</span>
        <hr style="width: 56.25%;">
    </div>
    <div>
        <span class="place">4</span>
        The Chaikhana <span class="votes">8</span>
        <hr style="width: 50%;">
    </div>
    <div>
        <span class="place">5</span>
        Шницель-Хаус <span class="votes">2</span>
        <hr style="width: 12.5%;">
    </div>
    <div>
        <span class="place">6</span>
        Регистан <span class="votes">1</span>
        <hr style="width: 6.25%;">
    </div> 
    <div>
        <span class="place">7</span>
        Мюнхаузен <span class="votes">1</span>
        <hr style="width: 6.25%;">
    </div>
</div>


.