水平显示列表不能与显示内联一起使用

Question

我试图横向打印我的列表，但它不能使用内联显示。我还使用了float: left;和position:cente r但是它不是水平居中的。

PHP

foreach ($memberinfo as $info) 
{
    echo "<ul><li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar']  .   "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li></ul><br>";

}

CSS

.groupmember ul
{
    margin:0;
    list-style-type: none;
    text-align:center;

}

.groupmember ul li 
{
    display:inline;

}

Answer 1

您正在为每个ul创建一个新的无序列表$memberinfo，因此display:inline正在运行，但ul仍然像块元素一样。 在foreach之前创建ul标记并在之后关闭它，这样您的列表项将按您的要求显示：

echo "<ul>";
foreach ($memberinfo as $info) {
    echo "<li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar']  .   "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li>";
}
echo "</ul>";

顺便说一句，断行br标签是不必要的，因为你想把每个li放在另一个旁边。

Answer 2

使用 display: inline-block 建议可能是正确的解决方案。

.groupmember ul li {
    display:inline;
}

display: inline 除元素之外的其他内容 它们 >

Answer 3

display:inline非常有限，不允许添加任何块级样式。

您最好使用display:inline-block或使用float:left。

请记住，如果您使用浮点数，那么您需要将父元素的溢出设置为overflow:auto（对IE＆lt; 8使用可见），这应该可行。首先使用内联块。