The strangest thing is that after specifying display: flex; they are displayed by a bar. Does anyone know how to fix this? html code:

<div class="header"> <a href="">12</a> <a href="">12</a> <a href="">21</a> </div>

css code:

 body, html{ margin: 0; padding: 0; background-color: white; } .content { width: 80%; margin: 0 auto; background: lightblue; height: 100%; }
  • Maybe it's because of the open server? - DNRAWW
  • Where are the styles for links in general, why should they be placed somehow differently? Who do you put display: flex ? - Alexxosipov
  • There are no styles for links, so I ask that the links should appear as a bar, no? - DNRAWW

2 answers 2

The a tag is a string element, so by default it will be displayed in a string, here you can see all string elements.

If you need to change the display style, you have already answered the question yourself, you need to change the display property

    Because <a> is a lowercase element.

    When you tell them to display: flex ; They become blocks, and blocks, as is known, occupy the entire row, so that each one is on its own row.

    Use dislpay: flex; flex-direction: row; dislpay: flex; flex-direction: row; (For string) or dislpay: flex; flex-direction: column; dislpay: flex; flex-direction: column; (For for column)

    This attribute must be specified by the parent ( .header ), and not by the child elements ( а ).