0

li内にアンカーがあり、すべてのliをリンクにします。コードを変更して、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>

4

2 に答える 2

3

最も簡単な方法は、要素に割り当てdisplay: blockてa（つまり、親の水平方向の幅全体を使用する）、の代わりにliマージン/パディングを適用することです。ali

JS Fiddleの概念実証（各要素のホバー状態に特定の色を割り当てることなく、::before疑似要素を使用してa要素の状態を示すことに注意してください）。hover

于 2012-06-20T21:56:57.743 に答える
0

私はこれが数年前であり、すでに非常に良い答えがあることを知っていますが、あなた（または誰か）がたまたま水平ナビゲーションバーを作ろうとしている場合display: inline-block;、要素で使用する他の可能性を捨てたかっただけです。aタグの下に新しい行を強制的に使用すると、リンクの下部に余分なスペースができる可能性があることに気付きdisplay: block;ました。これは、ナビゲーションバーを特定の高さに維持しようとしている場合は望ましくありません。

于 2015-03-02T01:34:57.223 に答える