ugrás a tartalomhoz

LI vízszintes listaelemben egy sorba...

vtsoftware · 2010. Jún. 8. (K), 06.42
Sziasztok

Remélem nem probléma a sok témám amiket mostanság indítok, de mindig belefutok valamibe...

Adott ez a lista:
.lista ul
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.lista ul li
{
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 240px;
  background-image: url("kep.png");
  line-height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.lista ul li a
{
  display: block;
  padding-left: 8px;
}
<div id="lista">
  <ul>
    <li><a href="link1">Sor1 (# db)</a></li>
    <li><a href="link2">Sor2 (# db)</a></li>
    <li><a href="link3">Sor3 (# db)</a></li>
  </ul>
</div>
Így ugye minden Sor# szöveg mellett rögtön a # db.
Ez mind nagyon szép és jó.

Ezt a listát kellene átformáznom úgy, hogy a Sor# maradjon a bal oldalon, a # db mind a jobb oldalra kerüljenek.
A G00gle-t végigtúrtam, olvastam kismillió fórumot, tényleg vagy 2 órám ráment... de semmit nem találtam csak "sima" egy soros, egy szöveges menüket az pedig már megvan.

Ha A #db-ket SPAN taggal float: right és clear: right-re állítom akkor IE8-ban jó, 7-ben és Firefoxban nem.
A text-align megint nem jó.

Valaki ha tudna segíteni, nagyon hálás lennék, mert már tényleg szórakozok vele majd' egy napja... ez nagyon kifog rajtam.

Előre is köszönöm
‹ Greasemonkey alatt futó script jQuery navigáció rel paraméterrel ›
 ■
1

Ezt a listát kellene

kuka · 2010. Jún. 8. (K), 09.22
Ezt a listát kellene átformáznom úgy, hogy a Sor# maradjon a bal oldalon, a # db mind a jobb oldalra kerüljenek.

Ezt hogy érted? Talán így?
Sor1      (44 db)
Sor22    (555 db)
Sor333     (6 db)
|               |
balra      jobbra

Ha igen, akkor minek neked az ul? A bajuszozást úgyis kikapcsoltad, az elemek meg úgyis két részből állnak. Akkor meg miért nem használsz dl-t?
2

ilyen nincs

ironwill · 2010. Jún. 8. (K), 09.28
Szia!

Nem tudsz egy elemen belül egyszerre két irányba rendezni.
Csak úgy, ha plusz elemeket teszel az "a"-ba.

Nálam pl. így nézne ki: (már ha jól értettem, mit szeretnél)
<html>
<head>
<style type="text/css">
#lista li {clear: both}
#lista a {width: 400px; display: block}
#lista a .left {float: left}
#lista a .right {float: right}
</style>
</head>

<body>

<div id="lista">  
  <ul>  
    <li>
      <a href="link1">
        <div class="left">Sor1</div>
        <div class="right">(# db)</div>
      </a>
    </li>
    <li>
      <a href="link2">
        <div class="left">Sor2</div>
        <div class="right">(# db)</div>
      </a>
    </li>  
    <li>
      <a href="link3">
        <div class="left">Sor3</div>
        <div class="right">(# db)</div>
      </a>
    </li>  
  </ul>  
</div>  

</body>
</html>
üdv, Gábor
3

Pontosan

vtsoftware · 2010. Jún. 8. (K), 22.33
Igen, így gondoltam, nagyon köszönöm.
Túl akartam bonyolítani... eszembe juthatott volna.
Köszönöm.