Overlapping labels

Question

Overlapping labels

Navigation

#1 by (1 votes)

1

Greetings.

With the following code ...

link

Labels are overlaid when the screen is dimmed. I wish it would be one underneath the other. Can anyone help me?

Thank you very much.

html css span

asked by anonymous 30.03.2018 / 22:40

1 answer

3 doubts of new user post with spring boot How can I sort a result in Laravel with a custom attribute of my model?

score 1 · Answer 1

I suggest separating each tag inside a container (a span element with a class) and adding display: inline-block .

Why inline-block ?

A span by default is only inline , and the line it occupies is just the one of the text inside it. The inline-block gives a line height to the element as it actually occupies, so whatever comes down will not overlap it.

Thenitwouldlooklikethis:

.Lab1 {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: bold;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right-color: transparent;
	border-radius: 4px 0 0 4px;
   display: inline-block;
}

.Lab2 {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: normal;
	color: #555;
	text-align: left;
	background-color: #fff;
	border: 1px solid #ccc;
	border-left-color: transparent;
	border-radius: 0 4px 4px 0;
	/* white-space: nowrap; já não é mais necessário */
   display: inline-block;

}

.container{
  display: inline-block;
	white-space: nowrap;
}

/* div apenas para exemplo*/
div{
   width: 100px;
}

Dentro da div com 100px:
<div>
<span class="container">
   <span class='Lab1'>1º</span><span class='Lab2'>Primeiro</span>
</span>
<span class="container">
   <span class='Lab1'>2º</span><span class='Lab2'>Segundo</span>
</span>
<span class="container">
   <span class='Lab1'>3º</span><span class='Lab2'>Terceiro</span>
</span>
</div>
<br><br>
Fora da div:
<br>
<span class="container">
   <span class='Lab1'>1º</span><span class='Lab2'>Primeiro</span>
</span>
<span class="container">
   <span class='Lab1'>2º</span><span class='Lab2'>Segundo</span>
</span>
<span class="container">
   <span class='Lab1'>3º</span><span class='Lab2'>Terceiro</span>
</span>