css - 使用 CSS 并排显示带有图像的元素

Question

我正在尝试仅使用 css 并排显示图像。问题是图像不是内联显示而是作为列表显示(我使用 <ul> 标签来完成此操作)。也许我使用了错误类型的标签或者我的 css 是错误的(见下文):

ul {
    float: left;
    width: 15em; /* width is changed */
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
}
li {
    float: left;
    width: 100%;
    margin: 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>