Html 将6个元素均匀地放置在两行中-有问题（CSS）

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

我曾尝试使用两个单独的无序列表，它们堆叠在一起，但我无法使它们与页面拉伸适当地缩放。我还尝试使用一个表，但我似乎无法将元素全部放置在其各自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;
}

下面是一个使用此方法的JSFIDLE：

我认为一份无序的清单可能是最好的选择。。。我只是不知道如何让所有元素在每个li的中心对齐。底部的元素似乎卡在li的右下角。底部的元素也是来自google+、twitter和facebook的小部件，所以我不确定这是否影响了他们的位置

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

• 根据窗口的间距调整窗口的宽度（在某种程度上，我不需要uber小型手机的布局或其他东西，比如右边填充或右边空白？）
• 当图元缩放时，底部图元需要与中心的顶部图元保持对齐
• 像图片中那样定位

任何关于如何使这个位置干净的建议将不胜感激

---

非常感谢你

通常，如果要选择每3个元素，必须使用

：nth-child（）

。在括号中，您可以将

n

和一个数字的任意组合放在一起。还有一些关键字，如

奇数

和

偶数

。因此，在本例中，将有3个不同的

：n-child（）

选择器。看起来像这样

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

6n

选择每六个元素，而

+1

添加该数字。因此，如果插入

1

，第一个选择器将返回

7

，第二个选择器返回

8

，第三个选择器返回

9

小提琴在使用中是否演示了这一点

---

是一篇更深入地解释第n个孩子的文章

看起来你的li应该准备好折叠了。
你可以给你的li指定一个固定的高度和宽度（如果你愿意，可以创建框），然后为每个图像添加一个样式，使其具有相对位置，并使用“上”和“左”将它们放置到位（请记住，百分比可以为您进行缩放）。我已经给出了一些提示，告诉您如何做到这一点，因为您希望通过实践来学习，但如果您需要CSS，请告诉我！

以下是一种方法，我建议您使用以下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>

在本例中，我正在调整无序列表，使其行为类似于表和表单元格

它工作得相当好，除非宽度变得太窄，但这可能是好的，取决于您的应用程序

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

您还可以尝试使用

display:table row

的一些变体

---

演示小提琴：

小提琴中没有任何东西。结果是空白的。是的，因为我的图像只是本地的，我可以快速上传它们。我更想寻找一种通用的好技术来实现这一点，而不是让别人为我编码。^^所以你问的是如何针对每三个元素？每个

li

中都有什么内容单行文本、图像、任意html？

.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;
}