As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look.
The challenge arises from the fact that I have an unordered list where list items may or may not contain an anchor element. When there is an anchor, I want the entire visible space of the list item to be clickable (meaning the anchor should take up 100% width and height), but when there is no anchor, the list item should still maintain the same dimensions as the others.
HTML
<ul>
<li>Index</li>
<li><a href=''>Home</a></li>
<li>FAQ</li>
</ul>
CSS
ul { padding:0; margin:0; width: 200px; background: lightgray; }
li { padding: 20px; border: solid black; }
li a { display: block; }
When attempting to add padding to the a element, items without a child lose the padding, while adding it to both elements results in uneven sizes. In the provided fiddle example, there is a part of the list item that remains unclickable. How can this issue be resolved?