Merge spans with display::inline-block equal as with float:left

Asked

Viewed 19 times

0

	div.dropdown {
		position: relative;
		display: inline-block;
		background-color: #CCC;
		margin: 0;
		padding: 0;
	}
	div.dropdown span {
		display: block;
		width: 200px;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
	div.dropdown-content {
		display: none;
		position: absolute;
		width: 195px;
		padding: 5px;
		z-index: 1;
		background-color: #f9f9f9;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	}
	
	div.dropdown:hover 
	div.dropdown-content {
		display: block;
	}
	
	div.dropdown:hover 
	div.dropdown-content p{
		width: 195px;
		height: 30px;	
		line-height: 30px;	
	}
	
	div.dropdown:hover 
	div.dropdown-content p:hover {
		background-color: #CCC;
		cursor: pointer;
	}
<div class=dropdown>
	<span>Cadastros</span>
	<div class="dropdown-content">
		<p id='cadastrarMembro'>Cadastrar Membro</p>
		<p id='cadastrarAdministrador'>Cadastrar Administrador</p>
		<p id='cadastrarCeldiva'>Cadastrar Gcéu</p>
		<p id='cadastrarCeldivaMembro'>Cadastrar Membro no Gcéu</p>
		<p id='cadastrarMensagem'>Cadastrar Mensagem</p>
		<p id='cadastrarEstudo'>Cadastrar Estudo</p>
	</div>
</div>

<div class=dropdown>
	<span>Edições</span>
	<div class="dropdown-content">
		<p id='alterarMembro'>Alterar Membro</p>
		<p id='alterarAdministrador'>Alterar Administrador</p>
		<p id='alterarCeldiva'>Alterar Gcéu</p>
		<p id='alterarCeldivaMembro'>Alterar Membro em Gcéu</p>
		<p id='alterarMensagem'>Alterar Mensagem</p>
		<p id='alterarEstudo'>Alterar Estudo</p>
	</div>
</div>

<div class=dropdown>
	<span>Cadastros</span>
	<div class="dropdown-content">
		<p id='lancarReuniaoCeldiva'>Reunião no Gcéu</p>
		<p id='relatorio'>Relatórios</p>
		<p id='email'>E-mails</p>
	</div>
</div>

Notice that between the spans there is a space.

How to make to paste the spans with display: inline-block as with float:left

  • Actually you don’t want to join the spans, but the Divs where the spans are :D

  • yes. yes, that’s right. The goal is to remove the spaces between these Divs to stay all together

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.