Spacing rows evenly inside div

384
May 06, 2017, at 11:49 PM

I have a div that has a table inside it, and it uses to create the links to it. So far, that's all I have done for the website. I'm attempting to space out the rows so that I can implement jQuery into it, however, I haven't started that yet.

My problem is that I can't get the rows to space evenly throughout the div. I've tried padding-left/right, however, that doesn't work with width and height, and margin-left/right aren't working. Is there a way to do this? Or, should I just get rid of the idea of using a table and create divs for each nav option?

Code

Answer 1

Here's one possible solution using lists and display:flex for positioning. Your updated example: https://repl.it/Hj62/6.

HTML part:

<div id="header-nav-content">
  <ul class="table-nav-content">
     <li class="nav-home">Home</li>
     <li class="nav-about">About</li>
     <li class="nav-contact">Contact</li>
  </ul>
</div>

CSS part:

.table-nav-content {
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}
.table-nav-content li {
    list-style: none;
}

You can also check if:

justify-content: space-between; 

doesn't suit you better. You can find more about flex positioning, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I would recommend that you use the HTML list approach, https://www.w3schools.com/html/html_lists.asp. You might want to use margin not padding to space out each item evenly, When to use margin vs padding in CSS.

<ul style="list-style:none;">
        <li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
        <li style="display:block;float:left;margin:5px" class="nav-about">About</li>
        <li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>
READ ALSO
How to rewrite JS with CoffeeScript

How to rewrite JS with CoffeeScript

I have such code in JS:

421
Github pages not loading W3.CSS?

Github pages not loading W3.CSS?

I am trying to create a github page using the css stylesheet from W3CSS

526
Closing an &#39;accordian&#39; &lt;div&gt; but forcing a &#39;top&#39; return

Closing an 'accordian' <div> but forcing a 'top' return

I have an 'accordion' embedded in a PHP while loop

253
column resizing without restricting the other columns - uigrid

column resizing without restricting the other columns - uigrid

I saw uigrid tutorial for column resizing

310