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>