Question

所以我用w3schools给出的例子来创建一个带有列表的div。

#links li {
        height: 32px;
        width: 100%;
        display: block;
        margin: 0;
        background-repeat: no-repeat;
        list-style: none;
}

是相关部分。

你可以看到一切正常（在这个例子中，我为所有这些都采用了随机的推特图标）

问题是，我希望它们是内联的。所以，我将其更改为display: inline;。没问题，对吧？不，它让eveything消失了。 inline-block也没有做任何事情。任何解决方案？

编辑：抱歉，没有说清楚：我希望水平链接。

Answer 1

inline-block效果很好。您已将封套DIV固定为4em高度。所以它被截止了：

小提琴inline-block和固定高度注释掉：

http://jsfiddle.net/TBsx8/2/

对于width的水平布局集LIs :( width:100%会导致LI占用所有可用的水平空间）

#links li {
    height: 32px;
    width: 32px;      /*  <<-----  */
    display: inline-block;
    margin: 0;
    background-repeat: no-repeat;
    list-style: none;
}

http://jsfiddle.net/TBsx8/8/

Answer 2

添加float:left和width:32px，这将有效

Answer 3

您可以将宽度设置为32px并显示为内联块，它应该可以工作。现在你的宽度为100％，这将填充容器。

Answer 4

你的li的宽度不应该是100％，尝试一个确切的宽度。

使用20％宽度的代码块：

#links li {
    height: 32px;
    width: 20%;
    display: inline-block;
    margin: 0;
    background-repeat: no-repeat;
    list-style: none;

}

Answer 5

作为您使用display:inline-block;width:32px的调用的附件，值得说明的原因是您无法将宽度应用于任何内联显示的元素。如初。

或者，您可以使用display:block;width:32px;float:left上的li，以及overflow:hidden上的ul/ol/dl或clearfix，以防止边距因崩溃而崩溃浮

显示：内联;使李背景图像消失

5 个答案: