Allign images in same line

請有人幫助我，因爲我正在學習網絡開發。我面臨兩個問題 1：我如何將所有圖像排列在同一行中，因爲我的最後一張圖像發生故障 2：圖像下方的價格我想aliign權上的圖像Allign images in same line

[<section id ="featured"> 
      <ul> 
       <li> 
       <img src="C:\xampp\htdocs\psdword\images/thumb-1.jpg"> 
        <a href="">Fugiat nulla sint</a> 
        <span>$30</span> 
        <span class="rating"></span> 
       </li> 
       <li> 
       <img src="C:\xampp\htdocs\psdword\images/thumb2.jpg"> 
        <a href="">Daute irure dolor</a> 
        <span>$24</span> 
        <span class="rating"></span> 
       </li> 
       <li> 
       <img src="C:\xampp\htdocs\psdword\images/thumb3.jpg"> 
        <a href="">Officia deserunt mollit</a> 
        <span>$60</span> 
        <span class="rating"></span> 
       </li> 
       <li> 
       <img src="C:\xampp\htdocs\psdword\images/thumb4.jpg"> 
        <a href="">Pim minim veniam</a> 
        <span>$17</span> 
        <span class="rating"></span> 
       </li> 
       </ul> 
      </section> 

    #featured ul{ 
    padding: 0; 
} 
#featured li{ 
    float: left; 
    width: 23%; 
    margin: 1%; 
    list-style-type: none; 
} 
#featured li img{ 
    width: auto; 
    margin-bottom: 10px; 

} 
#featured li a{ 
    color: #333; 
    text-decoration: none; 
    float: left; 
} 
#featured li span{ 
    float: right; 
    clear: left; 
    color: #333; 
} 
#featured ul:after{ 
    content: ""; 
    display: block; 
    clear: both; 
}

的最後一個彎道請看看這個圖片 Screenshot

來源

2016-05-25 Sohaib Asif

的寬度的寬度請張貼每個問題1點的問題。爲什麼你有'[

添加display: inline-block到#featured li並刪除float:left

來源

2016-05-25 21:05:27 Johannes

它沒有奏效。仔細看看下面的屏幕截圖，你會有更好的想法，我想要的 –

可能你應該將'#featured li img'寬度設置爲100％ – Johannes

父容器必須足夠寬才能在一行中顯示所有圖像，否則它會將圖像換成新行。檢查父元素的寬度。您可以調整父寬度或圖像以使其適合。

記住響應式網頁設計。換句話說，網頁如何在智能手機或平板電腦上呈現？您可能無法顯示所有設備類型的一行。

UI框架/庫可以在這裏幫助。網格佈局被廣泛用於此目的。請參閱Bootstrap或Material Design Lite。

來源

2016-05-25 21:13:34

記住響應式網頁設計。換句話說，網頁如何在智能手機或平板電腦上呈現？您可能無法顯示所有設備類型的一行。

你可以爲了讓因爲他們需要爲用戶的屏幕大小的元素使用盡可能多的行使用柔性盒：

ul{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
}

我也不會在設置裏的寬度百分比。在手機上，這將變得非常小。

爲了對齊跨度，你可以只讓李大如IMG

來源

2016-05-25 21:34:02 Sebastian

Allign images in same line

回答

相關問題