Question

我在里面有一个锚，我希望所有的李都是一个链接。如何更改我的代码以使li的所有空间都可以解决？

#MenuEventos {
    text-align:center;
}

#MenuEventos li{
    display: block;
    text-align:left;   
    width: 100%;
    margin: 8px 0 8px 0;
    padding: 12px;
} 

#MenuEventos li.vermelho, li.vermelho a{
    background-color: #A9462F;
}
#MenuEventos li.roxo, li.roxo a{
    background-color: #77369C;
} 
#MenuEventos li.azul, li.azul a{
    background-color: #595CC7;
} 
#MenuEventos li.verde, li.verde a{
    background-color: #5E9158;
}

    #MenuEventos li a {
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        color: white;
        width: 100%;      
        padding: 12px;
    }

<div id="MenuEventos">
    <h1 class="MenuEventos">Selecione uma das opções abaixo:</h1>
    <ul id="MenuEventos" class="Menu">
        <li class="vermelho">
            <a href="@Href("~/AreaLogada/Mensal")">Mensal</a>
        </li>
        <li class="roxo">
            <a href="@Href("~/AreaLogada/PorArea")">Por Área</a>
        </li>    
        <li class="azul">
            <a href="@Href("~/AreaLogada/Feriados")">Feriados 2012</a>
        </li>
        <li class="verde">
            <a href="@Href("~/AreaLogada/MeusEventos")">Meus Eventos</a>
        </li>    
     </ul>
</div>

Answer 1

最简单的方法是将display: block分配给a元素（因此它采用父li的完整水平宽度），并将{/ 1}应用于{{1而不是a。

JS Fiddle proof-of-concept（请注意，我已使用li伪元素来演示::before元素'a状态，而无需为每个元素指定特定颜色悬停状态）。

Answer 2

我知道这已经有几年了，并且已经有了一个非常好的答案，但是如果您（或任何人）想要在display: inline-block;元素上使用a那么可能碰巧正在尝试制作水平导航栏。我注意到使用display: block;强制标记下方的新行，可能会使您的链接在底部有一些额外的空间，如果您尝试将导航栏保持在一定高度，这是不可取的。

在里面锚定所有空间

2 个答案: