Html CSS页脚列间距

我需要一些帮助与我的代码，我正在寻找创建一个四个相等的列页脚，现在的第四列在间隔太远的权利，任何您可以提供的帮助是感激的

#页脚{
背景：#E5E0DD；
保证金：自动；
最小宽度：860px；
填充：0；
}
#页脚分区{
保证金：0自动；
溢出：隐藏；
填充：26px0；
宽度：960px；
}
#页脚div div{
保证金：自动；
填充：0；
文本对齐：左对齐；
宽度：240px；
}
#页脚分区h3{
颜色：#000；
字体大小：12px；
字体大小：粗体；
保证金：0.5px 0；
填充：0；
文本转换：大写；
}
#页脚div div ul，
#页脚分区ul li{
保证金：自动；
列表样式：无；
填充：0；
}
#页脚分区ul li{
字体大小：12px；
线高：22px；
颜色：#06C；
}
#页脚分区p{
颜色：#C1C1；
字体大小：10px；
边缘：左；
填充：0 0 2px 0；
文本对齐：右对齐；
文本阴影：1px 1px 1px#fff；
}

政策和指令




在知情的情况下。。。






关于

我将向您介绍基本的构建块以及实现这一点的以下方法：

浮动法

内联块方法

弹性方法

.footer列{
最小高度：200px；
宽度：25%；
背景：ddd；
边框：1px纯白；
框大小：边框框；
}
.float.footer列{
浮动：左；
}
页脚#页脚{
边缘底部：20px；
明确：两者皆有；
溢出：自动；
}
.inline块.footer列{
显示：内联块；
最大宽度：24.5%；
}
#footer.flex{
显示器：flex；
}
h3{
边框顶部：1px实心#ddd；
填充顶部：15px；
}
h3：第一种类型{
边界：0px；
填充：0px；
}

Float方法
内联块法
Flex方法

至少有4种方法可以创建包含等分子元素的元素。内联块、表格、浮动和弹性框

内联块在它们之间有一个有趣的空格。。。因此，25%不会像你期望的那样起作用。表是数据（在我看来）。浮动是很好的，但是它们以您需要很好理解的方式来处理文档流。可能是最具版本性的，但您需要了解浏览器前缀或使用。下面是浮动和弹性框的示例

加成

---

请把它放在密码笔或类似的为我们。我刚刚将您的代码粘贴到CodePen中，它没有四列。我很乐意提供帮助，但请将其转化为一种能够清楚地说明问题的形式。“这是不必要的，毫无理由的困难。我需要代码方面的帮助。”如果您认为这对您来说很困难，那么人们花在帮助您上的时间如何。欢迎来到堆栈溢出。阅读如何在这里写出好问题：-我同意发布代码片段有点浪费，但主要是因为它太具体了。像我们中的一些人提供的简化JSFIDLE非常值得您花费时间。：）

<footer class="site-footer floats">
<div class="inner-w">

  <ul class="module-list">

    <li class="module">one</li>
    <li class="module">two</li>
    <li class="module">three</li>
    <li class="module">four</li>

  </ul>

</div>
</footer>



<footer class="site-footer flex-box">
<div class="inner-w">

  <ul class="module-list">

    <li class="module">one</li>
    <li class="module">two</li>
    <li class="module">three</li>
    <li class="module">four</li>

  </ul>

</div>
</footer>

* {
  box-sizing: border-box;
  margin: 0;
}

.site-footer .inner-w {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.module-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.module {
  padding: 1rem;
}


/* with floats */
.site-footer.floats {
  background: wheat;
  overflow: hidden; /* fixes how the inner float collapses this element */
}

.site-footer.floats .module {
  width: 25%;
  float: left;
}


/* with flexbox */
.site-footer.flex-box {
  background: lightgreen;
}

.site-footer.flex-box .module-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}

.site-footer.flex-box .module {
  flex-basis: 25%;
}