Question

我有一个无序列表，显示链接和图像，我想内联显示它们。我使用了以下内容：

<ul>
   <li><a href="www."><img src="www."/>Link one</a>
<li><a href="www."><img src="www."/>Link two</a>
<li><a href="www."><img src="www."/>Link three</a>
</ul>

在我已经提出的css中：

li {
display: inline;
margin: 0 10px;
}

但列表仍然显示每行一项

Answer 1

关闭li代码

<style>
    li {
        margin: 0 auto;
        position: relative;
        float: left;
        display: inline;
    }
    </style>
    <ul>
       <li><a href="www."><img src="www."/>Link one</a></li>
        <li><a href="www."><img src="www."/>Link two</a></li>
        <li><a href="www."><img src="www."/>Link three</a></li>
    </ul>

Answer 2

我发现答案是将其更改为显示：inline-block;

希望这有助于其他人。

Answer 3

关闭您的li并使用，按预期工作

<ul>
<li><a href="www."><img src="www."/>Link one</a></li>
<li><a href="www."><img src="www."/>Link two</a></li>
<li><a href="www."><img src="www."/>Link three</a></li>
</ul>

Answer 4

试试这个

li {
float: left;
width: 100px; /*your width*/
margin: 0 10px;
}

在css中设置列表样式以显示内联

4 个答案: