2

我希望你能帮助我，我有一个水平菜单，我的问题如下：

在此处输入图像描述

第一个是带表格的正常拉伸，第二个是我想要的：stretch + even gaps between texts。

我通过额外的非中断空格实现了这一点，但它仅适用于固定菜单宽度，因此如果我更改菜单宽度，我必须更改 nbsp 字符的计数。有没有办法用css做到这一点，并且没有那些不间断的空格？

菜单点的数量和菜单宽度可以改变，所以我需要一个没有 javascript 的自动解决方案。没有个别列的设置，除非你能给我一个我可以在服务器端运行的算法。

我认为这不可能仅使用 css，但我不是 css 大师，这就是我问的原因....

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

5 回答 5

2

不确定这里的所有参数（“拉伸”不是很清楚），但是链接上的一些左右填充不是吗？因为这是一个菜单，所以我不会使用表格，而是使用 a <ul>。如果这不是您想要的，则有很多变化：

<!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>
于 2013-04-29T08:56:09.927 回答
2

编辑：下面的答案不适用于最近 IE 11 的 Internet Explorer 版本。它的单元格大小算法似乎与其他浏览器不同。

虽然这需要一些跨浏览器测试，但这是我一直在使用的：

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

到目前为止，这为我提供了一个适用于所有屏幕尺寸的菜单；在移动设备上它会缩小到屏幕宽度，在桌面上它会增长到一定大小，并且链接总是均匀分布的。

这里的灵感来源：https ://stackoverflow.com/a/16509901/802414

于 2014-06-01T21:15:05.153 回答
0

您可以设置各个列的宽度。

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%;
}
于 2013-04-29T08:33:09.177 回答
0

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 { padding: 0 3em; }
.second { padding: 0 2em; }
.third { padding: 0 4em; }
于 2013-04-29T08:42:27.567 回答
0

这可以通过 CSS 实现，通过使父元素 text-align: justify 和子元素 display:inline-block; 但是，对齐文本仅在至少有 2 行时才能正常工作。伪 :after 元素用于强制增加一个额外的（非常小的）行：

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

此技术归功于https://css-tricks.com/equidistant-objects-with-css/。

于 2015-03-03T06:38:56.597 回答