Question

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

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

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

因此，当我只想要每个<td>的背景图像ONCE时，我的CSS“背景”图像将重复为每个<tr> ...（使用不同的样式标签，而不是下面显示的））

有没有办法可以将我的while循环更改为text1，text2，text3，就像一个表（不使用表格），并按每个<li>维护我的CSS背景图像ONCE？任何帮助都会非常感激！

我的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可以作为钩子使用，并在这些跨度上设置显式宽度。请注意，如果跨度的内容过大，则需要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 */

显然，浮点数会将文本流中的跨度内容从文档流中移出，可能会导致<li>本身崩溃，因为它没有内容。

Answer 2

尽管我理解您的问题，但您希望LI元素在表格中具有固定的宽度，如TD：

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

在不使用表的情况下均匀地间隔多个行项目文本

我的PHP文件

我的CSS文件

2 个答案: