css - stretched and evenly spaced horizontal menu

问题

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

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>

回答1:

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>

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

回答3:

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

回答4:

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

回答5:

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.

来源：https://stackoverflow.com/questions/16274175/css-stretched-and-evenly-spaced-horizontal-menu

标签

html

css

alignment

stretch