Tabela de Parcelas

[mestre fyoda 1]

Se a qtd das parcelas forem de 2 digitos desalinha tudo, e se a qunatidade de digitos dos valores das parcelas forem diferentes tb desalinha.

Segue a imagem

 

http://img215.imageshack.us/i/imgja.jpg/

 

Como eu faço para deixar alinhado, direitinho . ?

 

#Parcelas
{
    clear: both;
    background-color: #F7F7F7;
    padding-left: 9px;
}

#Parcelas li
{
    display: inline;
    clear: both;
    width: 190px;
}

#Parcelas .Qtd
{
    font-size: 11px;
    font-family: Arial;
    text-align: left;
}

#Parcelas .Valor
{
    font-size: 12px;
    font-family: verdana;
    font-weight: bold;
}

 <div id="Parcelas">
                                
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl0_ctl00_lblParcela" class="Qtd">1x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl0_ctl00_lblValor" class="Valor">     <b>R$ 4.500,00</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl0_ctl01_lblParcela" class="Qtd">2x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl0_ctl01_lblValor" class="Valor">     <b>R$ 2.250,00</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl1_ctl00_lblParcela" class="Qtd">3x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl1_ctl00_lblValor" class="Valor">     <b>R$ 1.500,00</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl1_ctl01_lblParcela" class="Qtd">4x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl1_ctl01_lblValor" class="Valor">     <b>R$ 1.125,00</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl2_ctl00_lblParcela" class="Qtd">5x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl2_ctl00_lblValor" class="Valor">     <b>R$ 900,00</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl2_ctl01_lblParcela" class="Qtd">6x sem juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl2_ctl01_lblValor" class="Valor">     <b>R$ 750,00</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl3_ctl00_lblParcela" class="Qtd">7x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl3_ctl00_lblValor" class="Valor">     <b>R$ 790,63</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl3_ctl01_lblParcela" class="Qtd">8x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl3_ctl01_lblValor" class="Valor">     <b>R$ 712,56</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl4_ctl00_lblParcela" class="Qtd">9x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl4_ctl00_lblValor" class="Valor">     <b>R$ 652,39</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl4_ctl01_lblParcela" class="Qtd">10x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl4_ctl01_lblValor" class="Valor">     <b>R$ 604,76</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            <ul>
                                
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl5_ctl00_lblParcela" class="Qtd">11x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl5_ctl00_lblValor" class="Valor">     <b>R$ 566,28</b></span></span>
                            </li>
                        
                            <li>
                                <span id="spanParcela"><span id="ltvParcela_ctrl5_ctl01_lblParcela" class="Qtd">12x com juros</span></asp:Label></span>
                                <span id="spanValor"><span id="ltvParcela_ctrl5_ctl01_lblValor" class="Valor">     <b>R$ 534,66</b></span></span>
                            </li>
                        
                            </ul>                 
                        
                            </div>

[Desnickadu 0]

é uma tabela. então você monta uma tabela, não uma lista ;)

 

no CSS da tabela você define a largura [em pixels ou porcentagem] que assim não fica desalinhado.

lembre-se que na coluna dos valores o texto deve ser alinhado à direita.

[mestre fyoda 1]

não existe a possbilidade de usar com listas ?, pois as listas renderizam mais rapido no navegador !

[Evandro Oliveira 331]

Vai contra a semântica. Mas você pode solucionar assim:

 

li span {
    display: inline-block;
    width: 33%;
}