0

我在 2 行中创建了一个 8 项对齐的流体宽度菜单，其中包含居中的文本和装订线。

这意味着每行 4 个项目，宽度约为 24%。排水沟是透明的。除了居中换行的长菜单文本外，一切都准备就绪。一旦文本换行，第二个文本行“落在”菜单项下方。

如何为菜单项设置某种行高，以便较长的文本被换行但仍然垂直居中？

我在 ul 和 li 标签上都使用了伪元素，但如果有更好的解决方案（包括 javascrip），我愿意接受。没有菜单项超过 2 行，并且菜单将为小屏幕提供移动菜单解决方案。普通浏览器支持和IE8+

HTML 是由 WordPress 生成的，因此在那里无法进行太多更改。

下面的代码，图像和小提琴。

HTML：

<div id="wrapper">
    <ul >
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Longer text Longer text Longer text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
    </ul>
</div>

CSS：

#wrapper {
    max-width: 1000px;
    background: grey;
}

ul {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}

ul:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

li {
    width: 24%;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    border: 1px solid black;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
}

li a {
    text-decoration: none;
}

li a:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    line-height: 1px;
    text-align: center;
}

菜单

小提琴：http: //jsfiddle.net/A347a/

4

2 回答 2

0

您的问题来自 a:before 元素的高度定义。我不知道仅使用 css 解决此问题的好方法。要么你小心，内容不会超过一行并使用当前代码，或者如果检测到超过特定文本长度的内容，可能尝试一些改变 DOM 的 js-magic。

于 2013-11-19T19:19:41.907 回答
0

对于这样的结构，我会使用一个表格，更方便：

HTML

<table id="wrapper">
    <tbody >
        <tr>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
        <tr>
          <td><a href="#">longer text longer text longer text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
    </tbody>
</table>

CSS

#wrapper {
    col {
        max-width: 250px;
    }
    background: grey;
    border-spacing:0;
    border-collapse:collapse;
}

tbody {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}


td {
    width: 25%;
    height: 100px;
    vertical-align: middle;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
    border: 1px solid black;
}

li a {
    text-decoration: none;
}

小提琴

于 2013-11-18T02:34:27.923 回答