Question

我有一个包含图片的列表。该列表是基础中的中心列。

我需要它，以便列表元素图像全部在同一“行”中对齐，而不是沿着页面向下。

我该怎么做？我试过了：

li{
     display: inline;   
}

但没有运气。

Answer 1

将display: inline-flex添加到您的ul

＆＃13;

ul {
  list-style: none;
  display: inline-flex;
}
img {
  border: 1px solid black;
}

＆＃13;

<div class="row">
  <ul class="small-4 medium-6 small-centered columns">
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
  </ul>

</div>

＆＃13;

Answer 2

您可以为ul和li提供固定大小或基于百分比的宽度，并使用列表display:inline-block

#myUL{
    list-style: none;
    width: 100%;
    position: relative;
    display:block;
    float:none;
    padding: 0;
    margin: 0;

}
li{
    width: 32.5%;
    position: relative;
    margin: 0px;
    line-height: 14px;
    display: inline-block;
}
}

img{
    border: 1px solid black;
    position:relative;
    width:100%;
}

Jsfiddle

Answer 3

首先 - 你需要删除＆＃34; li＆＃34; css被嵌套在ul里面。然后，将li宽度设置为某个特定大小，并将display: inline-block;添加到li的css中应该可以胜任。
它具有更强大的通用浏览器支持，与inline-flex相反（如果您即将支持IE9 and below）：

HTML：

<div class="row">
    <ul class="small-4 medium-6 small-centered columns">
        <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
         <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
         <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
    </ul>

</div>

CSS：

ul {
    list-style: none; 
}
li {
      display: inline-block;
      width:30%;
      margin-right: -4px;
}
img {
    border: 1px solid black;
}

JSFiddle

对齐里面的图像

3 个答案: