php - 在不使用表格的情况下均匀间隔多个行元素文本

Question

我正在尝试创建 <a>text1 text2 text3</a> 的无序列表元素，带有 while 循环。然后使用 #sidebar li a 设置此列表的样式在我的 CSS 中。

我的问题是传入每个 <a> 的 text1、text2、text3我的 while 循环中的元素可以采用不同的长度，我希望它们像表格一样等距分布。但是，我不能使用表格，因为要像表格一样格式化，需要我这样做....

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

正因为如此，我的 CSS“背景”图像将重复每个 <td> ，当我只想要每个 <tr> 的背景图像一次时...(使用与下面所示不同的样式标签)

有没有办法改变我的 while 循环，使我的 text1、text2、text3 像表格一样均匀地间隔开(不使用表格)并在每个 <li> 中维护我的 CSS 背景图像一次？任何帮助将不胜感激!

我的 PHP 文件

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

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

我的 CSS 文件

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

Answer 1

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>";

}

添加<span>关于 $row['...'] 中的内容，以便 css 有一些东西可以用作钩子(Hook)，并在这些跨度上设置一个明确的宽度。请记住，如果跨度的内容太大，则需要 overflow。规则( hidden 、 visible 或 auto )，否则您的内容将开始看起来很奇怪。

举个例子

span.psuedo-col {

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

}

或者你可以使用

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

显然， float 会将 span 的内容从文档流中取出，可能会导致 <li>本身崩溃，因为它没有内容。