Question

我正在尝试使用css并排显示图像。问题是图像不是内联显示而是作为列表显示（我使用标签来完成此操作）。也许我使用的是错误类型的标签，或者我的css是错误的（见下文）：

ul { 向左飘浮; 宽度：15em; / *宽度改变* / 保证金：0; 填充：0; list-style-type：none; list-style-position：outside; } li { 向左飘浮; 宽度：100％; 保证金：20％; }

我可以使用一些帮助=）

Answer 1

试试这个：

ul.gallery {
   height:425px;
   width:200px;
   list-style-type: none;
}
ul.gallery li {
   border:1px solid #BBBBBB;
   float:right;
   height:50px;
   margin-right:7px;
   margin-top:7px;
   width:50px;
}

和（x）html

<ul class="gallery">
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li>
</ul>

Answer 2

为什么不使用span标签而不是ul / li？使用list标签可能就是你获得列表的原因。

Answer 3

你试图这样做吗？

ul
 li  img 1 /li
 li  img 2 /li
/ul

如果是这样，你的css应该在li元素上

li { display:block float:left padding: 0 margin: 0} 
ul { padding:0 margin 0;}

并排使用CSS的图像项目

3 个答案: