CSS页脚列间距

Question

我需要一些帮助我的代码我正在寻找创建一个有四个相等列的页脚，现在第四列的距离太远，你可以提供任何帮助。

#footer {
  background: #E5E0DD;
  margin: auto;
  min-width: 860px;
  padding: 0;
}

#footer div {
  margin: 0 auto;
  overflow: hidden;
  padding: 26px 0 0;
  width: 960px;
}

#footer div div {
  margin: auto;
  padding: 0;
  text-align: left;
  width: 240px;
}

#footer div div h3 {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 5px 0;
  padding: 0;
  text-transform: uppercase;
}

#footer div div ul,
#footer div div ul li {
  margin: auto;
  list-style: none;
  padding: 0;
}

#footer div div ul li {
  font-size: 12px;
  line-height: 22px;
  color: #06C;
}

#footer div p {
  color: #c1c1c1;
  font-size: 10px;
  margin: left;
  padding: 0 0 2px 0;
  text-align: right;
  text-shadow: 1px 1px 1px #fff;
}

<div id="footer">
  <div>
    <div>
      <h3>Policies & Directives</h3>
      <ul>
        <li><span class="ms-rteThemeForeColor-5-4">
	      <a href="https://.net/Policies/_layouts/15/WopiFrame.aspx?"></a></span></li>
      </ul>
    </div>
    <div>
      <h3>In the know...</h3>
      <ul>
        <li><span class="ms-rteThemeForeColor-5-4">
		<!-- FAQs- Select and move from comments based on appropriate   
			page-->
    <a href="#"
     	</span></li>
      </ul>
    </div>
    <div>
      <!-- Centers -->
      <h3>Centers</h3>
      <ul>
        <li><span class="ms-rteThemeForeColor-5-4">
	
		<a href= "https://net.Home.aspx">FAQs</a><br/>
		<!-- Glossary -->                                            				  
		</span></li>
      </ul>
    </div>
    <div>
      <!-- About -->
      <h3>About</h3>
      <ul>
        <li><span class="ms-rteThemeForeColor-5-4">
 	<a href="https://netMission Statement.aspx">Mission Statement</a><br>
	<a href="About.aspx?LA=#">Overview</a><br>
        <a href= "https://net%20Chart%20and%20Phone%">Organizational</a>     
	</span></li>
      </ul>
    </div>
  </div>
</div>

这是不必要的，也没有理由是困难的。我的代码需要帮助。我正在寻找等间距的列。

Answer 1

我将为您提供基本构建模块以及您可以实现此目标的以下方法：

1. 浮动方法
2. 内联阻止方法
3. Flex方法

<h3>Float Method</h3>
<footer id="footer" class="float">
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
</footer>

<h3>Inline-Block Method</h3>
<footer id="footer" class="inline-block">
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
</footer>

<h3>Flex Method</h3>
<footer id="footer" class="flex">
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
</footer>

{{1}}

剩下的由你决定了！

Answer 2

至少有4种方法可以创建具有均分的子元素。内联块，表格，浮点数和弹性框。

内联块有一个有趣的空间来解释它们之间...所以，25％将无法按预期工作。表格用于数据（在我看来）。浮点数很棒，但它们以您需要理解的方式将自己作为文档流程。 Flex-box可能是最多的，但您需要知道浏览器前缀或使用autoprefixer。以下是浮动和弹性框的示例。

https://jsfiddle.net/sheriffderek/fbatsw02/

标记

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