0

I have an anchor inside a li and I want all the li be a link. How can I change my code to make all the space of li be clicable?

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

4

2 回答 2

3

最简单的方法是分配display: block给a元素（因此它需要父元素的整个水平宽度li），并将边距/填充应用于.a而不是li.

JS Fiddle 概念验证（请注意，我使用::before伪元素来演示a元素的hover状态，而不必为每个元素的悬停状态分配特定颜色）。

于 2012-06-20T21:56:57.743 回答
0

我知道这已经有几年的历史了，并且已经有一个很好的答案，但是如果您（或任何人）碰巧尝试制作水平导航栏，我只是想排除display: inline-block;在元素上使用的另一种可能性。a我注意到display: block;在标签下使用强制换行可能会使您的链接在底部有一些额外的空间，如果您试图将导航栏保持在某个高度，这是不可取的。

于 2015-03-02T01:34:57.223 回答