html - CSS - 并排显示图像

Question

我正在创建一个显示可爱狗狗图片的网页。对于每只狗，我想显示狗的名字，然后在它下面显示一张图片。

我希望图像并排显示，但它们显示为垂直堆叠。

这是我的 fiddle

http://jsfiddle.net/53bnhscm/2/

这是我的 HTML

<h1>Listing dogs</h1>

<ul>
  <li> Dog 1 </li></br>
  <li>
    <a href="/dogs/2">
      <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
    </a>        
</li>
</ul>
<ul>
  <li> Dog 2 </li></br>
  <li>
    <a href="/dogs/3">
      <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
    </a>
  </li>
</ul>

这是我的 CSS

li {
  list-style: none;
  display: inline;
}

我认为在每个列表项之后添加一个 break 语句和一个 display:inline 属性可以解决问题，但我想不是。

Answer 1

另一种解决方案是使用 display: table-cell 到 ul 元素:

ul {
  display: table-cell;
}
li {
  list-style-type: none;
}

<h1>Listing dogs</h1>

<ul>
  <li>Dog 1</li>
  </br>
  <li>
    <a href="/dogs/2">
      <img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
    </a>
  </li>
</ul>
<ul>
  <li>Dog 2</li>
  </br>
  <li>
    <a href="/dogs/3">
      <img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
    </a>
  </li>
</ul>