ul li 两个放在一行使用display:inline

最新推荐文章于 2023-12-11 10:03:15 发布

用户147258369

最新推荐文章于 2023-12-11 10:03:15 发布

阅读量3.1k

点赞数

分类专栏： html+js类

本文链接：https://blog.youkuaiyun.com/hyq_07_27/article/details/118517637

版权

html+js类专栏收录该内容

28 篇文章

订阅专栏

这篇博客讨论了前端页面结构优化，原代码使用了两个div来展示列表内容，每个div包含多个li元素。为了简化后期的数据绑定和处理，建议将这些li元素整合到一个div内。通过设置CSS样式.display:inline，可以实现行内排列，达到同样的视觉效果，同时减少代码复杂性和提高灵活性。这种方法尤其适用于数据数量不确定的情况，如3条或6条数据，避免了额外的条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面如图：
在这里插入图片描述
原来美工写的是：

 <div class="article">
                <ul>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                </ul>
            </div>
            <div class="article">
                <ul>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                    <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a>
                    </li>
                </ul>
            </div>

用了两个div 中写。但是后期绑定数据的话，考虑到当数据有3条，6条这种情况的话，写在一个div ul 里面比较好。不用多去判断数据情况了。
修改样式：

 .li {
        display: inline; 
        float: left;
        margin:5px 5px 18px 40px; //这里根据自己的样式情况调整
    }

display : inline 将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

ul li 两个放在一行 使用display:inline

ul li 两个放在一行使用display:inline