1

我有一个提供随机图像的页面。图片下方是一个 css 元素，可让您向上或向下投票，但是，我认为 css 在图片下方有点过分。我希望它垂直靠近图像。你能帮我吗？

样式.css：

.vot_updown2 {
 position:relative;
 margin:3px;
 width:160px;
 background:#ffffff;
 border:0px solid #ffffff;
 font-family:"Segoe UI", Arial, sans-serif;
 text-align:center;
 padding:2px 1px;
 box-shadow:.17em .2em .23em #ffffff;
 -webkit-box-shadow:.17em .2em .23em #ffffff;
 -moz-border-radius:.7em;
 -webkit-border-radius:.7em;
 -khtml-border-radius:.7em;
 border-radius:.7em;
}

randimg.php 片段：

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo "<p>", "<div class='tagtext'>AUTHOR: ", ($row['username']), " ", "TAG: ", ($row['tag']), "</div>";
        echo "<p>", '<img src="' . $row['image'] . '" alt="" />', "<br>";

echo "<div class='vot_updown2' id=" . 'vt_' .$table.($row['id']). "></div>";
    }

我曾尝试删除换行符，但无济于事。尝试使用 span 而不是 div 无法显示元素。

4

4 回答 4

1

<p>标签具有默认边距值，您可以调整第二个<p>底部的边距以使其vote_updown2 <div>更接近它，​​如下所示：

将类添加到图像容器前。image_container：

echo "<p class='image_container'><img src='" . $row['image'] . "' alt='' /></p>";

然后将 css 属性添加到容器并根据需要调整底部边距：

.image_container
{
    margin-bottom: 0; //adjust as required
}

js.fiddle

于 2013-11-03T11:32:06.617 回答
0

将此添加到 .vot_updown2：

   margin-top:-10px;

您可以将 10px 更改为

所有你想要的。

于 2013-11-03T10:41:19.953 回答
0

您可以通过为 img 元素提供“display:block”或“float:left”样式声明来删除图像下方的额外空白。请参阅删除图像下方的空白

于 2013-11-03T11:03:56.487 回答
0

添加这个：

垂直对齐：中间；

于 2013-11-03T11:42:27.170 回答