CSS页脚列间距

Question

I need some assistance with my code I am looking to creating a footer with four equal columns, right now the fourth column in spaced too far to the right, any assistance you can provide is appreciated.

 #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> 

This was unnecessary and difficult for no reason. I need help with my code. I am looking for columns equally spaced.

Answer 1

I'm going to give you the basic building blocks and the following methods you can go about achieving this:

1. Float Method
2. Inline-Block Method
3. Flex Method

 .footer-col { min-height: 200px; width: 25%; background: #ddd; border: 1px solid white; box-sizing: border-box; } .float .footer-col { float: left; } footer#footer { margin-bottom: 20px; clear: both; overflow: auto; } .inline-block .footer-col { display: inline-block; max-width: 24.5%; } #footer.flex { display: flex; } h3 { border-top: 1px solid #ddd; padding-top: 15px; } h3:first-of-type { border: 0px; padding: 0px; } 

 <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> 

The rest is up to you!

Answer 2

There are at least 4 ways to create an element with children that are evenly divided. Inline-block, tables, floats, and flex-box.

Inline-block has a funny space to account for between them... so, 25% will not work as you expect. Tables are for data(in my opinion). Floats are great, but they take themselves our of the document flow in a way you need to understand well. Flex-box is probably the most versitile, but you need to be aware of the browser prefixes or use autoprefixer . Here is an example of both floats and flex-box.

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

Markup

<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>

Styles

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