Html 单个UL CSS中的三列_Html_Css

Html 单个UL CSS中的三列

html css

Html 单个UL CSS中的三列,html,css,Html,Css,我正在尝试重新创建Windows 8应用程序菜单（新的“开始菜单”）我的目标是有一个方形div，旁边有一个描述性的文本，当它到达某个点时，列会自行分裂（这一点我还没有确定，但Iv'e已经走得很远了）换句话说：我试图创建一列，该列向下自动拆分为3列，并在到达包装宽度末端后再次从左侧开始正如你在我的JFIDLE中所看到的，Iv'e做了一些非常接近的东西我似乎还是找不到正确的解决办法。主要是因为我不能使用NTH-CHILD etc属性，因为它用于IE7 <html> <h

我正在尝试重新创建Windows 8应用程序菜单（新的“开始菜单”）

我的目标是有一个方形div，旁边有一个描述性的文本，当它到达某个点时，列会自行分裂（这一点我还没有确定，但Iv'e已经走得很远了）

换句话说：我试图创建一列，该列向下自动拆分为3列，并在到达包装宽度末端后再次从左侧开始

正如你在我的JFIDLE中所看到的，Iv'e做了一些非常接近的东西

我似乎还是找不到正确的解决办法。主要是因为我不能使用NTH-CHILD etc属性，因为它用于IE7

<html>
<head>
    <style>
        .mp-submenu {
            margin-bottom: 1px;
            position:relative;
        }

            .mp-submenu ul{
                max-width:500px;
                max-height:300px;
                list-style:none;
            }

            .mp-submenu ul li{
                float:left;
            }

            #triple li  { width:30.333%; }

        .mp-submenu-square-dg, 
        .mp-submenu-square {
            float:left;
            margin: 5px 0 5px 0;
            padding:5px;
            width:50px;
            height:50px;
            background-color: #8D8D8D;
        }

        .mp-submenu-square-dg:hover, 
        .mp-submenu-square:hover {
            background-color: #F17B0A;
        }

        .mp-submenu-square-dg {
            background-color: #696969;
        }

        .mp-submenu-headletter {
            margin: 5px 0 5px 0;
            font: normal 27px arial;
            text-align: left;
            vertical-align:bottom;
            width:50px;
            height:50px;
            color: black;
            display:inline-block;
            background-color:none;
            float:left;
        }

        .mp-submenu-headletter-desc {
            padding-top:35px;
            font: normal 12px arial;
        }

    </style>
</head>
<body>
    <article class="mp-submenu">
        <ul id="triple">
            <li>
                <div class="mp-submenu-headletter">A</div>
            </li>
            <li>
                <div class="mp-submenu-square">1</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square-dg">2</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square">3</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square-dg">4</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square">5</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-headletter">B</div>
            </li>
            <li>
                <div class="mp-submenu-square">1</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square-dg">2</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square">3</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square">1</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-headletter">C</div>
            </li>
            <li>
                <div class="mp-submenu-square">1</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square-dg">2</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
            <li>
                <div class="mp-submenu-square-dg">3</div>
                <div class="mp-submenu-headletter-desc">Beschrijving</div>
            </li>
        </ul>
    </article>
</body>


.mp子菜单{
边缘底部：1px；
位置：相对位置；
}
.mp子菜单ul{
最大宽度：500px；
最大高度：300px；
列表样式：无；
}
.mp子菜单ul li{
浮动：左；
}
#三重锂{宽度：30.333%；}
.mp子菜单square dg，
.mp子菜单方块{
浮动：左；
保证金：5px0 5px0；
填充物：5px；
宽度：50px；
高度：50px；
背景色：#8D8D8D；
}
.mp子菜单方形dg：悬停，
.mp子菜单方块：悬停{
背景色：#F17B0A；
}
.mp子菜单square dg{
背景色：#6969；
}
.mp子菜单标题栏{
保证金：5px0 5px0；
字体：标准27px arial；
文本对齐：左对齐；
垂直对齐：底部对齐；
宽度：50px；
高度：50px；
颜色：黑色；
显示：内联块；
背景色：无；
浮动：左；
}
.mp子菜单标题说明{
填充顶部：35px；
字体：普通12px arial；
}


A.


1.
贝什里金


2.
贝什里金


3.
贝什里金


4.
贝什里金


5.
贝什里金


B


1.
贝什里金


2.
贝什里金


3.
贝什里金


1.
贝什里金


C


1.
贝什里金


2.
贝什里金


3.
贝什里金

添加以下内容：

#三重li:n子（3n+1）{clear:both}

这将导致从第一个开始的每三个项目清除浮动并开始新的一行。

我非常感谢您的回复，我忘了提到我不能使用第n个子属性，因为该项目必须适用于IE7（这确实会救我的命）。谢谢您的快速回复！该死那么，在这种情况下，您需要在

li

元素上设置一个明确的高度，以便所有项目都具有相同的高度，并且不会在“自然”清理时出错。您不能为每三个项目增加一个类，样式

清晰：两者都？@谢谢您的回复，我将尝试这两种可能的解决方案。感谢上帝为这个网站顺便说一句。现在方块堆叠得更近了一点，但是在包装纸或UL上设置一个高度完全被忽略了。