eşit bir tablo kullanmadan çoklu satır öğesi metin aralığı

2 Cevap php

Ben bir süre döngü ile <a>text1 text2 text3</a> elemanları, sırasız bir liste oluşturmak için çalışıyorum. Bu liste daha sonra benim CSS #sidebar li a kullanılarak tarz.

Benim sorun benim while döngüsünün her <a> elemanı geçirilir metin1, metin2, text3 farklı uzunluklarda alabilir ve onları bir tablo gibi eşit aralıklı olmak için ben isterim ki. Bir tablo gibi biçimlendirmek Ancak, ben, bir tablo kullanın OLAMAZ, bu yapmamı gerektirir ....

<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...

Ben sadece her <tr> için KEZ arka plan resmini istediğiniz zaman ve bu nedenle, benim CSS "arka plan" görüntüsü, HER <td> için tekrar olacak ... (farklı stil etiketlerini kullanarak gösterilenden daha altında)

(tablo kullanmadan) eşit bir tablo gibi benim metin1, metin2, text3 uzaya benim while döngü değiştirmek ve ONCE her başı benim CSS arka plan resmi korumak için bir yol var <li>? Herhangi bir yardım Inanılmaz mutluluk duyacağız!

my PHP file

while($row = mysql_fetch_assoc($result))
{      

echo "<ul id=\"sidebar\">";
echo "<li><a href=\"#\">" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</a></li></ul>";
}

my CSS file

#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}

2 Cevap

while($row = mysql_fetch_assoc($result))
{      

echo "<ul id=\"sidebar\">;
echo "<li><a href=\"#\"><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></a></li></ul>";

}

Css bir kanca olarak hizmet için bir şey vardır bu sırayla, $row['...'] gelen içerik etrafında <span> s ekleyin ve bu açıklıklar üzerinde açık bir genişlik ayarlanır. Açıklıklı içeriği çok büyük ise bir overflow kuralı (gerektirecek ya akılda tutarak hidden, visible veya auto ) veya içerik garip bakmaya başlayacaktır.

Bir örnek olarak

span.psuedo-col {

display: inline-block;
width: 10em;
overflow: hidden;

}

Yoksa kullanabilirsiniz

`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */

Yüzen, belli ki, belki de çökecek hiçbir içeriğe sahip olacak sinüs için <li> kendisi neden belge akışının dışına yayılma içeriğini alacaktır.

Asfar Ben sorunuzu anlamak gibi, sizin LI öğeleri bir tabloda TD gibi sabit bir genişliğe sahip istiyorum:

#sidebar li {
  float:left;
  width:33%; /* three columns with equal width */
}

etiketler