Question

我想创建一个“磁贴”列表，出于所有实际目的，它看起来像<table>，但我不想使用表，因为列数可能会根据瓷砖内容的大小，我希望它是流动的。

我给每个瓷砖一个边框右边和边框底部，我给了瓷砖的父容器一个边框顶部和边框左边。问题是父容器的border-top一直延伸到其父容器的右边，而不是在第一行的最后一个tile之后停止。如何消除延伸到右上角的额外线？或者我将如何以更好的方式实现这种效果？

Preview Here

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #DDD;
                font-family: Helvetica, Arial, sans-serif;
            }

            #wrapper {
                background-color: #FFF;
                width: 800px;
                margin: 0 auto;
                padding: 20px;
            }

            .clearfix:after {
                content: "";
                display: table;
                clear: both;
            }

            .tiles {
                list-style: none;
                padding: 0;
                border: 1px solid #000;
                border-right: 0;
                border-bottom: 0;
            }

            .tile {
                color: #333;
                width: 140px;
                height: 140px;
                overflow: hidden;
                padding: 20px 10px 20px 20px;
                border: 1px solid #000;
                border-top: 0;
                border-left: 0;
                display: inline-block;
                float: left;
            }

            .tile h2 {
                margin: 0;
                font-size: 1.25em;
            }

            .tile p {
                margin: 0 0 1em 0;
                font-size: .75em;
            }

            .tile p:last-child {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <ul class="tiles clearfix">
                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah</p>

                    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>

                <li class="tile">
                    <h2>Tile Title</h2>
                    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
                </li>
            </ul>
        </div>
    </body>
</html>

Answer 1

您可以使用负边距重叠重复边框：

.tiles {
    border: none;
    margin-bottom: 1px;
    margin-right: 1px;
}

.tile {
    border: 1px solid #333;
    margin: 0 -1px -1px 0;
}

Demo

Answer 2

尝试给你的ul宽度。你的情况是684px。

<ul class="tiles clearfix" style="width: 684px;">

但是你的逻辑绝对有更好的设计。

Answer 3

这里看看。

http://jsfiddle.net/39MW6/1/

内边框稍微厚一点，但它有效。

将border-top: 0;添加到.tiles {}

如何使<ul>折叠到浮动<li> s的宽度？</li> </ul>

3 个答案: