[xhtml][css] listy li - zawartość obok siebie Opcje

[pijanyadmin]

zazwyczaj lista wygląda tak:

Kod

<ul>
<li><a href="#">gra:</a></li>
        <li><a href="#">cena: </a></li>
        <li><a href="#">ilosc: </a></li>
        </ul>

oczywiście jest to ostylowane w css itp. tylko jak można zrobić aby lista była wyświetlana w ten sposób:

Kod

<li><a href="#">gra:</a> gatunek</li>

biorąc pod uwage fakt iż cała lista jest "with:100%;" aby "gra" była po lewej, a gatunek po prawej... float ? tylko że wtedy "gatunek" znajdzie się pod spodem w "cena"

Ten post edytował pijanyadmin 5.02.2008, 15:45:44

[pijanyadmin]

Kod

.gramenu{
width: auto;
border-top: 1px solid #e3e3e4;
border-left: 1px solid #e3e3e4;
border-right: 1px solid #e3e3e4;
}


.gramenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.gramenu li{
padding: 0;
margin: 0;
width: 100%;
border-bottom: 1px solid #e3e3e4;
}

.gramenu a{

display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #e3e3e4;
}


.gramenu a:hover{
background-color: #F8FBBD;
color: black;
}
.prawy{
float: right;
margin-right: 0px;

}

Kod

<div class="gramenu">        
        <ul>
        <li><a href="#">gra: </a><div class="prawy">gatunek</div></li>
        <li><a href="#">gra </a><div class="prawy">gatunek</div></li>
        <li><a href="#">cos</a></li>
        <li><a href="#">cos2</a></li>
        </ul>
</div>

problrm jest z:

Kod

.gramenu a{

display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #e3e3e4;
}

w takiej formie "gatunek" spada do drugiego <li> jaki jest pod spodem, gdy usune "display: block" wyświetlanie jest dobrze, tylko brak już zaznaczenia po najechaniu na liste.