Display list horizontally is not working with display inline

Question

I'm trying to print out my list horizontally but it isn't working with display inline. I also used float: left; and position:center but then it isn't centered horizontally.

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

You are creating a new unordered list ul for every $memberinfo, so the display:inline is working, but the ul's remain like block elements. Create the ul tag before the foreach and close it after it, so your list items will be displayed like you want:

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>";

By the way, the break line br tag is unnecessary because you want to put every li one beside the other.

Answer 2

Using display: inline-block as suggests probably the right solution here.

.groupmember ul li {
    display:inline;
}

display: inline is not really useful for anything but elements that have no nested elements inside them.

Answer 3

display:inline is very limited and doesn't allow any block-level styling to added to it.

You're better off using display:inline-block or using float:left.

Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.