CSS Inline-Block Layout
Justified navigation bar
The horizontally justified navigation (menu) bar has a number of items that should be justified. The first (left) item has no left margin within the container, the last (right) item has no right margin within the container. The distance between items is equal, independent of the individual item width.
- The nav, ul, and li tags were chosen for their semantic meaning of 'a list of navigation (menu) items'. Other tags may also be used of course.
- The :after pseudo-element causes an extra 'line' in the ul and thus an extra, empty height of this block, pushing other content down. This is solved by the negative margin-bottom, which has to have the same magnitude as the line-height (but negative).
- If the page becomes too narrow for all the items to fit, the items will break to a new line (starting from the right) and be justified on this line. The total height of the menu will grow as needed.
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website