CSS-并排显示图像

Question

我正在创建一个显示可爱狗的图片的网页。 我想为每只狗显示狗的名字，然后在其下方显示图片。

我希望图像可以并排显示，但它们是垂直堆叠显示的。

这是我的小提琴

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

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

Answer 1

您的li包含在自己的ul因此您需要内联。

ul {
  list-style: none;
  display: inline-block; //use instead of inline
}

小提琴

另外， li标记更适合列表项，因此这并不是真正有效的方法。 加上其大量的额外代码。 您可以简单地将部分包装在容器中并内联：

HTML

<h1>Listing dogs</h1>

<div class="wrapper">
    Dog 1
    <a href="/dogs/2">
       <img alt="Dog 1" src="..." />
    </a>
</div>
<div class="wrapper">
   Dog 2
   <a href="/dogs/3">
      <img alt="Dog 2" src="..." />
   </a>
</div>

CSS

.wrapper{
    display: inline-block;
}

.wrapper a{
    display: block;
}

例

Answer 2

在这里摆弄。 顺便说一下，您的标记很乱，我建议使用HTML5标记<figure>这样您就可以轻松添加<figcaption> ： http : //jsfiddle.net/53bnhscm/7/

<h1>Listing dogs</h1>

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

CSS

figure {
    float:left;
    display:inline-block;
}

Answer 3

另一种解决方案是使用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> 

Answer 4

ul > li {
  list-style: none;
   display: inline;
   float: left;
   margin: 0 5px;
}

我想可能是您正在寻找类似的内容。 在这种情况下，您必须编辑html代码http://jsfiddle.net/ahmadsharif/p0cbmy2h/

Answer 5

以下答案对您的标记是正确的。

ul {
  list-style: none;
  display: inline-block; //use instead of inline
}

但是，如果您的意思是问题中所写的内容，那么我需要提到的一件事是“您应该注意HTML标记”。

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

然后您的CSS将是：

ul li{
    display: inline-block;
}
ul li a b{
    display: block;
    text-align: center;
    margin-bottom: 5px
}

Answer 6

只需使用UIKIT及其网格系统即可。 这样，它们将自动堆叠在电话上。

http://getuikit.com/docs/grid.html

<div class="uk-grid">
<div class="uk-width-1-2">Your Image HERE</div>
<div class="uk-width-1-2">Another Image Here</div>
</div>