Javascript 响应性设计3分区跨布局，ul堆叠在中央分区下方

我正在尝试为我的页脚设置一个3分区1列表。左边的一个链接，中间的标题在我的社交媒体图标上面都是中心的，然后右边的另一个链接恰好如图所示。

我用一些写得很糟糕的代码实现了这一点。我甚至不会给你看css。很糟糕

  <div class="contentFoot">
    <ul>
      <li class="joinCommunity">Join our community</li>
      <li class="leftFoot"><a class="contentFootLink" href="sign-up">Sign up for email updates</a></li>
      <li>
        <ul class="soc">
          <li><a class="soc-twitter" href="#"></a></li>
          <li><a class="soc-facebook" href="#"></a></li>
          <li><a class="soc-google" href="#"></a></li>
          <li><a class="soc-pinterest" href="#"></a></li>
          <li><a class="soc-instagram soc-icon-last" href="#"></a></li>
        </ul>
      </li>
      <a class="contentFootLink" href="feedback"><li class="rightFoot">Give us feedback about our website</li></a>
    </ul>
  </div>

---

编辑：将soc设置为包含边距：0自动；把它放在正确的位置，但其他一切仍然不一致

实现所需设计的最佳方法是将社交图标移动到中间部分，并将部分设置为宽度的

33.333%

：

HTML

<div class="midFoot">Join our community
          <ul class="soc">
            <li><a class="soc-twitter" href="#"></a></li>
            <li><a class="soc-facebook" href="#"></a></li>
            <li><a class="soc-google" href="#"></a></li>
            <li><a class="soc-pinterest" href="#"></a></li>
            <li><a class="soc-instagram soc-icon-last" href="#"></a></li>
          </ul>
        </div>

然后删除列表的某些浏览器默认样式：

.soc {
  padding: 0;
  margin: 0;
}

我还添加了

字体大小：0

到

.contentFoot

，然后专门在页脚部分设置

字体大小。这是删除
内联块
元素之间添加的空白的常用技巧。
另一种选择是浮动元素


.leftFoot,
.midFoot,
.rightFoot {
  display: inline-block;
  vertical-align:top;
  font-size: 1rem;
  width: 33.3333%;
}

.soc {
  padding: 0;
  margin: 0;
}