2

I hope, you can help me, I have a horizontal menu, my problem is the following:

enter image description here

The first is normal stretch with table, the second is what I want: stretch + even gaps between texts.

I achieved this with additional non breaking spaces, but it works only by fixed menu widths, so if I change the menu width I have to change the count of the nbsp characters. Is there any way to do this with css, and without those non breaking spaces?

The count of the menupoints and the menu width can change, so I need an automatical solution without javascript. No settings by individual columns, unless you can give me an algorithm which I can run on server side.

I don't think this is possible with css only, but I'm not a css guru, that's why I asked....

<style>
    * {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
    }

    table {
        width: 400px;
    }

    td {
        border: 1px solid blue;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td><a href="#">aa</a></td>
        <td><a href="#">aaaaaaaaaaaaa</a></td>
        <td><a href="#">aaaaaaaaa</a></td>
    </tr>
</table>


<table>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">aa</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;<a href="#">aaaaaaaaaaaaa</a>&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;<a href="#">aaaaaaaaa</a>&nbsp;&nbsp;&nbsp;</td>
    </tr>
</table>
inf3rno
  • 24,976
  • 11
  • 115
  • 197

5 Answers5

2

Not sure of all the parameters here ("stretch" is not very clear), but wouldn't some left and right padding on the links do it? Because this is a menu, I won't use a table but a <ul> instead. There are plenty of variations on this if it's not what you want:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
ul, li {margin: 0; padding: 0;}
ul {list-style: none; display: table; border-spacing: 5px; }
li {display: table-cell; background: #f7f7f7; border: 1px solid blue; }
li a {padding: 0 30px;}
</style>

</head>
<body>

<ul>
    <li><a href="#">aa</a></li>
    <li><a href="#">aaaaaaaaaaaaa</a></li>
    <li><a href="#">aaaaaaaaa</a></li>
</ul>

</body>
</html>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • OK, I'm wondering if, by "stretch", you mean that the menu always stretches to a width of 100%? If so, then back to the drawing board. :-) – ralph.m Apr 29 '13 at 09:02
  • Stretch not working if I resize the window, but if I change the width manually, then it works. I don't know why padding helped, but it's perfect! :-) Thanks! :-) – inf3rno Apr 29 '13 at 10:12
  • There is a slight difference if you have this 3 menupoint in a huge horizontal space, but I usually have at least 5-6 menupoints, so it is good enough for me. Thanks again! :-) – inf3rno Apr 29 '13 at 10:27
2

Edit: The below answer does not work well with Internet Explorer versions as recent as IE 11. Its algorithm for cell sizing appears to work differently than other browsers.

While this will require some cross-browser testing, here's what I've been using:

http://jsfiddle.net/aaronadams/j3cEQ/

HTML:

<p>Default spacing:</p>
<ul>
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>
<p>Even spacing:</p>
<ul class="even">
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>

CSS:

ul {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 30em;
    text-align: center;
}
li {
    display: table-cell;
    margin: 0;
    padding: 0 0.125em;
    white-space: nowrap;
}
.even li {
    width: 1%;
}

So far, this is providing me with a menu that works really well across all screen sizes; on mobile it shrinks to screen width, on desktop it grows up to a certain size, and the links are always evenly spaced.

Credit here for the inspiration: https://stackoverflow.com/a/16509901/802414

Community
  • 1
  • 1
Aaron Adams
  • 1,657
  • 16
  • 23
0

You can set the width for the individual columns.

JSFiddle

HTML

<table>
    <tr>
        <td class="first"><a href="#">aa</a></td>
        <td class="second"><a href="#">aaaaaaaaaaaaa</a></td>
        <td class="third"><a href="#">aaaa aaaaaaaaaaaaa</a></td>
    </tr>
</table>

CSS

table {
    width: 400px;
}

td {
    border: 1px solid #d3d3d3;
    text-align: center;
}

.first {
    width: 30%;
}

.second {
    width: 45%;
}

.third {
    width: 30%;
}
Vimal Stan
  • 2,007
  • 1
  • 12
  • 14
0

JSFIDDLE

You can set the "padding left and right for individual column

HTML

<table>
    <tr>
        <td class="first"><a href="#">aa</a></td>
        <td class="second"><a href="#">aaaaaaaaaaaaa</a></td>
        <td class="third"><a href="#">aaaa aaaaaaaaaaaaa</a></td>
    </tr>
</table>

CSS

table { width: 400px; }
td { border: 1px solid #d3d3d3; text-align: center;}
.first { padding: 0 3em; }
.second { padding: 0 2em; }
.third { padding: 0 4em; }
Kino
  • 16
  • 1
0

This can be achieved with CSS by making the parent element text-align: justify, and the child elements display:inline-block; However, justified text only works properly when there's at least 2 lines. The pseudo :after element is used to force an extra (very tiny) line:

#container {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 600px;
}
#container div {
  width: 150px;
  height: 125px;
  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

Credit to https://css-tricks.com/equidistant-objects-with-css/ for this technique.

Daniel Howard
  • 4,330
  • 3
  • 30
  • 23