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

页面如图：

原来美工写的是：

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