水平显示列表不适用于嵌入式显示

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

您正在为每个$memberinfo创建一个新的无序列表ul ，因此display:inline可以正常工作，但是ul仍然像block元素一样。 在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 as可能在这里建议正确的解决方案。

.groupmember ul li {
    display:inline;
}

display: inline是不是任何东西，但有在他们里面没有嵌套元素的 元素非常有用。

Answer 3

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

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

请记住，如果使用浮点数，则需要将父元素的溢出设置为overflow:auto （对于IE <8使用可见），这应该可以工作。 首先使用内联块。