正文

css项目列表如何水平放置

IP云
IP云V管理员/6 阅读
08/11
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

列表项目默认分行排列，那么将列表项设置浮动就可以实现水平放置

1
li{float:left;}

示例如下：

  1. 创建Html元素

    1
    2
    3
    4
    5
    6
    <ul>
        <li>itemlist-1</li>
        <li>itemlist-2</li>
        <li>itemlist-3</li>
        <li>itemlist-4</li>
    </ul>

  2. 设置css样式

    1
    2
    ul{width:500px;height:50px;line-height:50px;padding:10px 25px;border:4px solid #ebcbbe;}
    li{padding:0 20px;float:left;}

  3. 观察显示效果