我正在尝试水平打印我的列表,但是它不能与内联显示一起使用。 我还使用了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;

}

在此处输入图片说明

===============>>#1 票数:2 已采纳

您正在为每个$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都放在另一个位置。

===============>>#2 票数:1

使用display: inline-block as可能在这里建议正确的解决方案。

.groupmember ul li {
    display:inline;
}

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

===============>>#3 票数:1

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

最好使用display:inline-blockfloat:left

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

  ask by Marnix Verhulst translate from so

未解决问题?本站智能推荐:

3回复

Firefox显示列表错误

FireFox似乎在列表项中将任何单词放在一个单独的行上,且不止一个单词,例如: http : //a.flatsi.es/projects/7temwk/images/j7tjrt 但是在其他所有方面,这都是我想要的,就像这样。 http://a.flatsi.es/projects/
1回复

如何在彼此上方显示列表项

如何显示没有项目符号的堆叠在一起的列表项目? 这个小提琴将清除所有问题: http : //jsfiddle.net/obliviga/6vu5q/1/ 因此,当用户将鼠标悬停在“关于我们”上时,出现的链接应相互堆叠而没有要点,而不是被要点分散。 我尝试使用list-style:
1回复

在CSS中垂直显示内联列表

我有一个菜单,我正在尝试为我的网页运行,它会跑到它的右侧,我希望它是垂直的,但我有麻烦让文本在上下都对齐。 我真的没有取得任何进展让它显示正确,但这里是旋转CSS等: 这是网页的样子: 我想让'Home'按原样旋转,但要列在列表中。 所以它会像现在一样从网页的顶部开始,但不是文
2回复

在移动设备上无序水平列表切换为垂直列表

我有一个无序的垂直列表作为导航栏,正在更改为移动设备上的水平列表。 如何防止列表切换到垂直并且在其所在的div元素中保持水平。 旁注:生成的代码段将列表显示为垂直,但是我怀疑这是因为鉴于其宽度,该窗口被视为可移动的 编辑:在移动设备的屏幕右侧似乎也有一个小的可滚动间隙。
1回复

如何修复Chrome和Opera上的水平列表?

最后一个li下拉了chrome和opera,它在ie和firefox上看起来很好。 我该如何解决这个问题? 是什么导致他们看起来不同? 在这里,谢谢http://jsfiddle.net CSS: HTML:
2回复

修复水平二级HTML菜单/列表的位置

你好我有这样的两级菜单 它是一个在页面中心对齐的水平菜单,我想要做的是当选择MenuItem3时它的子菜单出现,它的项目应该出现在MenuItem3下面。 我所描述的是这样的: 我已经水平完成并显示子菜单,但是MenuItem3的大小会增加以适应子菜单的大小。 所以,我得到的
3回复

如何更改水平li列表的顺序?

我通过HTML列表制作了几个框,每个框将包含图片和文本,但是整个框都应该有一个链接。 无论如何列表都是这样的: 视频1 | Video2 | Video3 | Video4 | 视频5 | 但是由于我的列表将是2行,因此我希望它像这样: 视频1 | Video
3回复

使无序列表水平拉伸,以便始终填充div

对此我很抱歉,我认为这个问题已经解决,但结果证明事实并非如此。 我在div中有一个无序列表,我希望列表始终水平填充整个div,无论缩放级别如何。 怎么会这样呢? 分别设置每个列表项的宽度? 我试过这个,我的项目的宽度确实加起来100%,但列表仍然没有填满div。 我也正在修改模板,
1回复

如何在不破坏移动视图中的导航功能的情况下将特定的类应用于导航列表?

我正在尝试使用以下响应式导航: http : //codepen.io/Goatsy/pen/dqnKv 但是,我希望导航列表具有特定的名称,以便将其样式与其他列表样式区分开。 我尝试使用以下方法: ul.navlist {nav css here} (在codepen链接中显示)
1回复

如何在水平之间设置空间
  • 使他们恢复页面的100%
  • 我有一个包含一些元素的列表(有时是3 /有时是4个或更多...) 我想做的是让他们自动调整以使用所有空间。 CSS中有办法吗? 告诉他们“嘿 我要您使用100%的可用空间吗? 实际上,这很好,但我希望他们使用所有空间。 这就是我所拥有的: 这就是我想要的: