Question

我一直在尝试一些不同的方法来以这种方式定位6个不同的元素：

diagram

我尝试过将两个单独的无序列表堆叠在一起但我无法通过正确的页面拉伸来缩放它们。我也试过使用一张桌子，但我似乎无法将这些元素放在各个tds中心的所有位置。

这是我的无序列表中的css：

.button ul {
    height: auto;
    list-style: none;
}

.button li {
    display: inline-block;
    list-style: none;
    margin: 0 18% 0 0;
    padding: 0;
    vertical-align: top;
}

这些包含在：

中

.newfooterright {
    float: left;
    width: 33.333333%;
    top: 0%;
    left: 0%;
    height: 250px;
    padding: 0 0 0 0;
    margin: 0;
    font-family: RobotoLight;
    text-decoration: none;
    text-transform: none;
    font-size: 1.5em;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
}

这是这个方法的jsfiddle： jsFiddle for unordered list

我认为无序列表可能是要走的路......我只是不确定如何让所有元素在每个li的中心对齐。底部的元素似乎卡在了李的右下角。底部元素也是来自谷歌+，推特和脸书的小部件，所以我不确定这是否会影响他们的位置。

基本上元素需要能够做到这一点：

根据它们的间距来缩放窗口宽度（一点，我不需要一个超级小的手机布局或者其他东西。像padding-right或margin-right？）
当元素缩放时，底部元素需要与中心的顶部元素保持对齐
如图所示！

任何关于如何干净利落地定位的建议都将不胜感激！

非常感谢你！

Answer 1

通常，如果要选择每3个元素，则必须使用:nth-child()。在括号中，您可以放置n和数字的任意组合。还有一些关键字，例如odd和even。因此，在这种情况下，您将拥有3个不同的:nth-child()选择器。它看起来像这样

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
  color:red;
}

6n选择每第六个元素，+1添加该数字。因此，如果您插入1，第一个选择器将返回7，第二个选择器返回8，第三个选择器返回9。

Here是一个在使用中证明这一点的小提琴

Here是一篇更深入地解释nth-child的文章

Answer 2

看起来你的李已经准备好崩溃了。你可以给你的li一个固定的高度和宽度（如果你愿意的话创建盒子），然后为每个图像添加一个样式以具有相对位置和使用顶部和左侧使它们到位（请记住，百分比可以为您缩放）。我已经删除了如何通过实践来学习如何实现这一点的提示，但如果您需要CSS，请告诉我！

Answer 3

以下是您可能采用的一种方法，我建议使用以下HTML脚手架：

<div class="newfooterleft">
    <ul class="button">
        <li><a class="twitterbutton" href="#"></a></li>
        <li><a class="facebookbutton" href="#"></a></li>
        <li><a class="googleplusbutton" href="#"></a></li>
    </ul>
    <ul class="widget">
        <li>(I put the corresponding widget here)</li>
        <li>(I put the corresponding widget here)</li>
        <li>(I put the corresponding widget here)</li>
    </ul>
</div>

和以下CSS：

.newfooterleft {
    width: 40%;
    border: 1px solid red;
    overflow: auto;
}

.twitterbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.twitterbutton:hover {
}

.facebookbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.facebookbutton:hover {
}

.googleplusbutton {
    background-image: url("http://www.placekitten.com/100/100");
    background-size: 100%;
}
.googleplusbutton:hover {
}

.newfooterleft ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
.newfooterleft ul li {
    display: table-cell;
    width: 33.3333%;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid red;
}
.newfooterleft ul li:first-child {
    border-left: none;
}
ul.button li {
    height: 100px;
}
.button li a {
    display: inline-block;
    width: 62px;
    height: 62px;
}
.button {
    border-bottom: 1px solid red;
}
ul.widget li {
    background-color: white;
    height: 150px;
}

在这种情况下，我正在调整无序列表，使其表现得像表格和表格单元格。

除非宽度太窄，否则效果相当不错，但根据您的应用情况，这可能没问题。

您可以使用最小宽度来约束它。

您还可以使用display: table-row尝试一些变体。

演示小提琴：http://jsfiddle.net/audetwebdesign/2U3D9/

将6个元素均匀分布在两行中 - 遇到问题（CSS）

3 个答案: