Why are there two elements in css to edit: both the li and the a element, why isn’t the a element included in the li element when editing it in css?
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
Now that developers have built support for Flexbox and Grids, we won’t be seeing that type of CSS for much longer. float is old hat and fading away into disuse. It was something that had developers pulling their hair out, back in the early days. So that is indeed, old CSS.
During rendering, the four menu items will be lined up horizontally, from left to right. Missing is the width property which goes hand-in-hand with float. The selector rule applies only to the LI container position.
As for the ruleset applied to anchors, a, we wouldn’t want to lump them in with the LI, its container element. Since an anchor is an inline element it has no shape. By declaring it a block it takes the shape of its container LI. Mind, the padding property will stretch the element, and possibly stretch its containing element, in the process. Not a big fan of padding as it adds complexity to contained layout, which one will discover in due course. It is not needed and there are other and better ways to accomplish that end.
Bottom line, the more rules we bubble up to parent containers the more unruly our style sheet becomes. Keep elements separate when styling them, and study the inheritance aspect in great detail. Forget any notion of combining rulesets or you will be, like past developers, pulling your own hair out.
List items are containers, as in block level elements. Anchors are not containers, but inline elements with a completely different purpose. Keep them separate.