css - 在 li 内对齐图像

Question

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

小提琴

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

我怎样才能做到这一点？我试过了：

li{
     display: inline;   
}

但没有运气。

Answer 1

添加display: inline-flex到您的ul

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

<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>

Answer 2

您可以给ul andli一个固定大小或基于 % 的宽度并用于列表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%;
}

提琴手

Answer 3

首先 - 您需要删除嵌套在 ul 中的“li”css。然后，将 li 宽度设置为某个特定大小，并添加display: inline-block;到 li 的 css 中应该可以完成这项工作。
与 inline-flex 相比，它具有更大的通用浏览器支持（如果您即将支持IE9 及以下版本）：

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