Loading

Interview Questions of CSS-Display

Q1  Imagine you have a navigation bar with several items that should be evenly spaced across the full width of the screen, but each item should only take up as much width as its content needs. Which CSS display property would you use, and how would you achieve this layout?

Answer To achieve this layout, I would use display: flex on the container element of the navigation bar. Using justify-content: space-between ensures that the items are evenly spaced across the width. Each item would use display: inline-block or remain as block-level elements within the flex container to take up only as much space as needed by their content.
.navbar {
    display: flex;
    justify-content: space-between;
}

.navbar-item {
    display: inline-block; /* or leave as block elements */
}