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

回答

相关问题