Question

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

我希望这些图像能够并排显示，但它们会垂直叠加显示。

这是我的小提琴

这是我的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

您的li已包含在他们自己的ul中，因此您需要将其内联。

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

FIDDLE

此外，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;
}

EXAMPLE

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>

CSS - 并排显示图像

6 个答案: