html - 如何用两条线做一个里？

Question

需要用 ul 做一个导航栏，但一个链接有一个 li 有两行，我需要遵循 .psd 文件的设计。我怎么能这样做？下面你可以看到 psd 文件的导航栏截图，以及我自己用 html/css 制作的源代码。

这是我的导航栏的来源：

http://jsfiddle.net/6xKL9/

<div class="sub-menu">
    <ul class="menu">
        <li><a href="#" id="empresa" class="">empresa</a>
            <div class="sub-empresa">
                <ul class="menu-empresa">
                    <li><a href="<?php echo site_url("historia"); ?>">história</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('politica_de_privacidade') ?>">política de privacidade</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('certificacoes') ?>">certificações e prêmios</a></li>
                </ul>
            </div>
        </li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('produtos') ?>">produtos</a></li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('representantes') ?>">representantes</a></li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('distribuidores') ?>">eletricista</a></li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('informativo_tecnico') ?>" id="infotec">informativos tecnicos</a>
            <div class="sub-informativo-tec">
                <ul class="menu-infotec">
                    <li><a href="#">generalidades</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_simbologia_instalacao') ?>">recomendações para instalações</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_conceitos_basicos') ?>">conceitos básicos sobre condutores</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_simbologia') ?>">simbologia</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_criterio_dimensionamento_circuito') ?>">critério de dimensionamento de circuitos</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_queda_tensao') ?>">queda de tensão</a></li>
                    <li class="separador"></li>
                    <li><a href="#">dimencionamento de eletrodutos</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('informativo_tecnico_correntes_maximas') ?>">correntes máximas de curto-circuito</a></li>
                </ul>
            </div>
        </li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('eventos') ?>">eventos</a></li>
        <li class="pipe"></li>
        <li><a href="<?php echo site_url('videos') ?>">videos</a></li>
        <li class="pipe"></li>
        <li><a href="#" id="contato">fale conosco</a>
            <div class="sub-fale-conosco">
                <ul class="menu-faleconosco">
                    <li><a href="<?php echo site_url('fale_conosco') ?>">fale conosco</a></li>
                    <li class="separador"></li>
                    <li><a href="<?php echo site_url('trabalhe_conosco') ?>">trabalhe conosco</a></li>
                    <li class="separador"></li>
                    <li><a href="#">seja nosso representante</a></li>
                    <li class="separador"></li>
                    <li><a href="#">seja nosso distribuidor</a></li>
                </ul>
            </div>
        </li>
    </ul><!-- /.menu -->
</div><!-- /.sub-menu -->

Answer 1

利用

vertical-align: middle 

随着

max-width 

实现效果：

http://jsfiddle.net/6xKL9/1/

删除填充以防止悬停问题：http: //jsfiddle.net/6xKL9/5/

请注意，垂直对齐仅适用于内联元素，并且您只能为块元素设置大小，因此我制作了内联块以享受这两个世界。

Answer 2

设置display: table-caption;在您的链接上。这会为每个单词触发一个新行。

小提琴

.sub-menu .menu li a {
  ...
  display: table-caption; /* <-- */
  text-align: center;
}

Answer 3

您可以只使用换行符

<br>

所以对于你的例子：

<li>informativos<br>tecnicos</li>