0

ID、photourl、thumbnailurl を含む SQL テーブルがあります。これで、写真を削除するスクリプトを作成できました。すべてが正常に機能しています。リストに画像を表示したいのです:

このような

ご覧のとおり、写真と削除リンクを 1 つのリスト項目に入れたいと思います。

<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>
4

3 に答える 3

2

HTMLを次のように設定してみてください。

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

次に、CSSを次のようにします。

.deleteImage { display: block; }​

これにより、画像の下に画像削除テキストを表示する場所を操作できます。

于 2012-11-19T18:08:46.180 に答える
0

これを行う1つの方法...使用する<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>


あなたは自分自身を理解することができます残り..

于 2012-11-19T18:01:34.287 に答える
0

場合によっては、テーブルが必要になることもありますが、テーブルのように見える必要はありません。

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/

誰がアップロードしたか、いつ写真を撮ったかなどの列を追加して、それらのスタイルを適切に設定できます。

リストのリストは私には適切ではないようです。私の考えでは、リストは似たようなものでなければなりません (買い物リスト、色のリストなど)。画像と削除ボタンは、関係のある異なるアイテムです (「削除」は関連付けられた画像を削除します)。関係は、表を使用するとより適切に表現されます。

于 2012-11-19T18:29:50.593 に答える