开发者社区> 问答> 正文

不用float怎么使包含了图片的ul li 或者是div 水平排列呢

<div class="main">
    <ul>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
    </ul>
</div>


全选复制放进笔记
.main ul li{
    width:48%;
    height:350px;
    overflow:hidden;
    margin-bottom:50px;
    display:inline;
}

.main ul li:nth-child(2n + 1){
    margin-right:4%;
}

.main ul li a img {
    width:100%;
    height:auto;
    min-height:350px;
}

网上看了一些别人的回答,都说给 li 加上 display:inline; 就可以了,可是我试了后效果是 li 的宽度会变成 100% ,并不是 css 中的 48% ,为什么呢?

我想要的是这样子:
screenshot
screenshot

展开
收起
a123456678 2016-05-27 14:13:06 2925 0
1 条回答
写回答
取消 提交回答
  • display: inline; 为行内元素,元素的宽度会根据内容决定,并且排在一行之内。那么你这里设置的 li 元素的高宽其实都是没有用的。
    那么我们这里可以使用两种方式进行修改:

    1. 彻底改 display 为 inline-block; 让其变成可以设置宽度的行级元素。
      但是其确定也很明显,就是不兼容低版本的 IE
    2. 继续保持 li 为 inline, 则它的宽度会由内容决定,那么你只需要将你的内容元素宽度设置固定的即可解决:
        .main ul li{
            overflow:hidden;
            margin-bottom:50px;
            display: inline;
        }
    
        .main ul li:nth-child(2n + 1){
            margin-right:3%;
        }
    
        .main ul li a img {
            width:48%;
            height:350px;
            height:auto;
            min-height:350px;
        }
    2019-07-17 19:17:45
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载