CODEWITHSUNDEEP
htmlcss
nicmare
nicmare

Reputation: 168

align horizontal list evenly (and responsive)

i know there are serveral ways to justify a horizontal list. but not like in my screendesign: enter image description here you see my result on top and below the screendesign. any ideas how to improve the space between the items to have them more evenly? (2nd and 3rd item is to long)

this is my code:

.navi {
    text-align: center;
    display: table;
    width: 100%;
    ul {
        display:table-row;
    }
    li {
        display:table-cell;
        a {
            display: block;
            border: 1px solid #000;
        }
    }
}

Upvotes: 0

Views: 1015

Answers (2)

Blisteragent
Blisteragent

Reputation: 23

I like the use of the table, table-row and table-cell method. In my example I have 2 links that need to be horizontally aligned but I wanted some space between them. I added an empty item between the links to create a spacer. Then added css to style only the odd cells.

<div class="aff">
<ul class="buttons">
<li><a href="http://www.link1.com">Link1</a></li>
<li>&nbsp;</li>
<li><a href="http://www.link2.com">Link 2</a></li>
</ul>
</div>

.aff {display:table; text-align:center; width:100%; box-sizing:border-box;}
.aff ul.buttons {display:table-row;list-style-type:none; margin:0; padding:0;}
.aff ul.buttons li:nth-child(odd) {display:table-cell; width:47%; background:#acacac; padding:10px; border-radius:.44em}
.aff ul.buttons li a {display:block; line-height:45px; font-size:1.2em; text-decoration:none; font-weight:bold;}
.aff ul.buttons li a:hover {text-decoration:underline;}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99564

While this is solved by Flexbox, you can still use CSS Tables - for the sake of browser support - to achieve the desired result:

.navi {
  text-align: center;
  display: table;
  width: 100%;
}
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; }
.navi li a { display: block; border: 1px solid #000; }
<div class="navi">
  <ul>
    <li><a href="">Link No.1</a></li>
    <li><a href="">Link No.2 has much text</a></li>
    <li><a href="">Link No.3 has much more text</a></li>
    <li><a href="">Link No.4</a></li>
    <li><a href="">Link No.5</a></li>
  </ul>
</div>

In order to keep text in one line, then you could give white-space: nowrap to the table-cells as follows:

.navi { text-align: center; display: table; width: 100%; }
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; white-space: nowrap; }
.navi li a { display: block; border: 1px solid #000; }
<div class="navi">
  <ul>
    <li><a href="">Link No.1</a></li>
    <li><a href="">Link No.2 has much text</a></li>
    <li><a href="">Link No.3 has much more text</a></li>
    <li><a href="">Link No.4</a></li>
    <li><a href="">Link No.5</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions