Question

所以我有一个包含ID，photourl和thumbnailurl的sql表。现在我写了一个删除照片的脚本。一切正常，事情是我想在列表中显示图像：

like this

如您所见，我想将照片和删除链接放入一个列表项。

<ul>
    <li>
        <ul>
            <li><img src="#"/></li>
            <li><a href="#"> DELETE IMAGE </a></li>
        </ul>
    </li>

    <li>
        <ul>
            <li><img src="#"/></li>
            <li><a href="#"> DELETE IMAGE </a></li>
        </ul>
    </li>
</ul>

我写了一些代码，但它似乎不起作用......它在列表中垂直显示照片。

<ul >
<li>
<?php
    while ($line = $db->fetchNextObject()) {
        //echo '<li>';
            echo '<ul>';
                echo '<li> <img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> </li>';
                echo '<li>  <a href="index.php?remove=true&id='.$line->id.'">Verwijder</a> </li>';
            echo '</ul>';
        //echo '</li>';
        /*echo '<img class="thumb_image '.$line->category.'" src="'.$line->minurl.'"/> <br/> <a href="index.php?remove=true">Verwijder</a> ';
    */
    }


?>
</li>
</ul>

Answer 1

尝试像这样设置HTML：

<ul>
   <li><img src="#"/><a href="#" class="deleteImage"> DELETE IMAGE </a></li>
 </ul>

然后你的CSS如下：

.deleteImage { display: block; }

这将允许您操作您希望删除图像文本显示在图像下的位置。

Answer 2

执行此操作的一种方法...使用<table>和<li> 这会给你粗略的想法..尝试类似的东西..

<table>
  <ul>
    <tr>
      <td><li> row1 - column1 (1,1) </li></td>
      <td><li> row1 - column2 (1,2) </li></td>
    </tr>
    <tr>
      <td><li> row2 - column1 (2,1) </li></td>
      <td><li> row2 - column2 (2,2) </li></td>
    </tr>
  </ul>
</table>

你可以自己弄清楚..

Answer 3

有时候，你需要的是一张桌子，但它不必像一张桌子：

CSS：

table {
    display: block;
}

tr {
    display: inline-block;
    border: 1px solid;
    margin: 1em;
}

td {
    display: block;
    text-align: center;
}

img {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

HTML：

<table>
    <tr>
        <td><img /></td>
        <td><a href="#">Delete</td>
    </tr>

    <tr>
        <td><img /></td>
        <td><a href="#">Delete</td>
    </tr>
</table>

http://jsfiddle.net/52yTm/

您可以添加额外的列，例如上传者或拍摄照片的时间等等。然后将那些样式设置为有意义。

列表清单似乎不适合我。在我看来，列表应该是类似的东西（购物清单，颜色列表等）。图像和删除按钮是具有关系的不同项目（“删除”删除关联图像）。用表格可以更好地表达关系。

从sql表中提取照片和照片ID并将其显示在页面php的列表中

3 个答案: