How do I break lines between links without having them span the entire width of the parent element?

Question

How do I break lines between links without having them span the entire width of the parent element?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I've been looking at these two topics dealing with line breaks between tags:

Both would solve my problem if it were not for one detail: I need the <a> links to have the display: inline-block property so that I can apply a scale to :hover . Without this property scale has no effect.

On the other hand, if I apply display: block to the links (or do not specify any display ), they will occupy the full width of the div-parent where they are, which is not desirable . I would like the link to be restricted only to the area of the text it contains, not the entire width of the div-parent .

Something like this:

I could simply put a   after each link, but I know semantically   can not be used to break lines between tags, just in text.

Is there any way to break these lines between <a> tags without they occupying the entire width of the div-parent ?

html css

asked by anonymous 30.07.2018 / 03:07

2 answers

1

To do without the tag  using display:flex in the parent and the container-flex orientation in column rather than inline as in default / p>

See the example:

div{
  width: 200px;
  background: yellow;
  padding: 15px;
  display: flex;
  flex-direction: column; /* coloca os itens em coluna um abaixo do outro */
  align-items: flex-start; /* alinha os itens a esquerda para não ocuparem a linha inteira e apenas o próprio conteúdo */
}

a{
  background: aqua;
  -webkit-transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
}

a:hover{
  display: inline-block;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<div>
   <a href="">Link um</a>
   <a href="">Link dois</a>
</div>

30.07.2018 / 14:40

Injected Code Request Post API Messenger with Spring Boot

score 0 · Accepted Answer

I have included the <a> tags inside tags  (of which <a> contains only text), as it mentions this HTML5 specification .

As the  tags occupy the full extent of the div-parent , it will force the line break. All you have to do is adjust the default margin that  has for the desired spacing:

<style>
p{
  margin: 5px 0;
}
</style>

Looking like this:

p{
  margin: 5px 0;
}

div{
  width: 200px;
  background: yellow;
  padding: 15px;
}

a{
  background: aqua;
  -webkit-transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
}

a:hover{
  display: inline-block;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<div>
   <p><a href="">Link um</a></p>
   <p><a href="">Link dois</a></p>
</div>