用div+css实现table效果

最新推荐文章于 2023-01-03 10:55:02 发布

原创最新推荐文章于 2023-01-03 10:55:02 发布 · 931 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #css #div #float #class #.net

网站技术相关专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现特殊列表样式的技巧，通过浮动和边框设置，让列表项能够水平排列并具备独特的视觉效果。此外，还展示了如何在列表项中嵌套SPAN元素以达到特定布局需求。

<html>
<head>
    <style>
        ul
        {
            list-style: none;
            margin: 0;
        }
        li
        {
            float: left;
            padding: 5px;
            text-align: left;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
            border-left: 1px solid red;
            height: 28px;
        }
        .nextli
        {
            border-right: 1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li>left</li>
        <li>middle</li>
        <li class="nextli">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
    </ul>
</body>
</html>