Ссылка на обертку li с заполнением

Question

У меня есть неупорядоченный список с большим количеством элементов списка. Некоторые элементы списка - это ссылки, некоторые - нет. Я хочу добавить дополнение к элементам списка, чтобы внешний вид был согласован независимо от того, является ли это ссылкой или нет, т. Е. Я не хочу добавлять дополнение к привязке, но в список и для привязки для обертывания ссылки И обивка.

Несмотря на использование display:block при наведении цвета фона только вокруг текста внутри ссылки. Он игнорирует заполнение. Есть ли способ, чтобы ссылка включала прописку (без ввода прокладки по ссылке)?

ul li { 
 
    float: left; 
 
    line-height: 5em; 
 
    padding: 0 2em; 
 
} 
 
a:link { 
 
    display: block; 
 
} 
 
a:visited { 
 
    display: block; 
 
} 
 
a:hover { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
} 
 
a:active { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
}

<ul> 
 
    <li><a href="1.html">Item 1</a> 
 
    </li> 
 
    <li><a href="2.html">Item 2</a> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li><a href="5.html">Item 5</a> 
 
    </li> 
 
</ul>

Answer 1

Вы можете использовать hover в li вместо a, чтобы исправить background-color наносится на hover с помощью:

li:hover a { 
    display: block; 
} 
li:hover { 
    background-color: rgb(245, 245, 245); 
} 

вместо:

a:hover { 
    display:block; 
    background-color:rgb(245,245,245); 
} 

Смотреть демо ниже:

ul li { 
 
    float: left; 
 
    line-height: 5em; 
 
    padding: 0 2em; 
 
} 
 
a:link { 
 
    display: block; 
 
} 
 
a:visited { 
 
    display: block; 
 
} 
 
li:hover a { 
 
    display: block; 
 
} 
 
li:hover { 
 
    background-color: rgb(245, 245, 245); 
 
} 
 
a:active { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
}

<ul> 
 
    <li><a href="1.html">Item 1</a> 
 
    </li> 
 
    <li><a href="2.html">Item 2</a> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li><a href="5.html">Item 5</a> 
 
    </li> 
 
</ul>

Answer 2

Здесь вы идете, мои комментарии должны объяснить все, но не стесняйтесь спрашивать.

<ul> 
    <li><a href="1.html">Item 1</a></li> 
    <li><a href="2.html">Item 2</a></li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li><a href="5.html">Item 5</a></li> 
</ul> 

ul{ 
    list-style-type: none; /* Feel free to remove this, just easier without bullets */ 
} 

ul li { 
    float: left;  
    line-height: 5em;  /* Should be the same as height */ 
    padding: 0 2em; 
    position: relative;  /* Make sure a & a:before can stay contained */ 
    height: 5em;   /* Should be same as line-height */ 
    white-space: nowrap; /* Ensure that your items don't wrap and mess up width */ 
    z-index: -1;   /* So that a:before is able to trigger with :hover */ 
} 

a{ 
    position: relative;  /* Make sure a:before can stay contained */ 
    display: block;   /* Ensures that a can expand to full size of container */ 
} 

a:before{ 
    content: "";   /* Necessary for :before element to be created */ 
    position: absolute;  /* Vital - allows positioning */ 
    top: 0; 
    right: -2em;  /* Minus same padding as li has */ 
    bottom: 0; 
    left: -2em;   /* Minus same padding as li has */ 
    z-index: -1;   /* Makes sure :before doesn't go above anchor text */ 
} 

a:hover:before, 
a:active:before { 
    background-color:rgb(245,245,245); 
}