Question

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

this is my navbar on psd file. the "informativos tecnicos" have two lines

这是我的导航栏的来源：

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

请注意，vertical-align仅适用于内联元素，您只能为块元素设置大小，因此我创建了内联块以便享受这两个世界。

Answer 2

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

<强> FIDDLE

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

Answer 3

您可以使用换行符

<br>

所以对你的例子来说：

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

怎么用两条线做一个李？

3 个答案: