5

Como inserir uma div dentro de outra div sem que nenhuma delas faça a quebra de linha.

Quero fazer desse jeito pois estou em desenvolvimento de um website de clan e no index tem que ter o botão de login ou registro, eu fiz isso mas quando fui rodar o html ele fez a quebra de linha da 2a div.

<div id="menubarwidget">
  <div id="register"><a href="?action=register">Registro</a></div>
  <div id="login"><a href="?action=login">Entrar</a></div>
  <!-- E se for o caso do $_COOKIE retornar um usuário já logado -->
  <div id="loggedin" style="display: <?php echo $logged_display; ?>"><span id="username"><?php echo $logged_in_user; ?></span></div>
  </div>

4 Respostas 4

5

Você pode inserir uma classe, para manipular no css.

E vc pode definir que elas estejam dipostas inline, conforme o exemplo:

.menu
{
  display: inline;
}
<div id="menubarwidget">
  <div class="menu" id="register"><a href="?action=register">Registro</a></div>
  <div class="menu" id="login"><a href="?action=login">Entrar</a></div>
  <!-- E se for o caso do $_COOKIE retornar um usuário já logado -->
  <div id="loggedin" style="display: <?php echo $logged_display; ?>"><span id="username"><?php echo $logged_in_user; ?></span></div>
  </div>

4

.row {
	display: table;
	width: auto;
	border-spacing: 5px; /*cellspacing:poor IE support for  this*/
	margin: 20px auto 0 auto;
}

.form-group-col {
	float: left; /*fix for  buggy browsers*/
	display: table-column;
	margin: 0;
	width: auto;
	display: table-column-group;
	
}
<div class="row">
  <div class="form-group-col">
    Texto 01
  </div>
  <div class="form-group-col">
    Texto 02
  </div>
</div>

4

Você pode usar o float:left no CSS do div register para evitar isso.

#register { float:left; }
<div id="menubarwidget">
  <div id="register"><a href="?action=register">Registro</a></div>
  <div id="login"><a href="?action=login">Entrar</a></div>
 </div>

De forma mais elaborada pode fazer como o Mayllon Baumer disse ou até usar um framework CSS para cuidar do Grid.

2

Cada elemento no HTML possui uma propriedade display, no caso do <div> o display é definido como block por padrão. O block "diz" a cada elemento que o possui para sempre começar em uma nova linha, no caso do <div>(divisão) a propriedade faz jus ao seu nome.
Existem outros valores que você pode definir para display, um deles é o inline. Veja mais sobre a propriedade display aqui

No seu caso, por se tratar de um menu, faz mas sentido, ao invés de encapsular os links em um <div>, colocar dentro de uma estrutura de menu, própria para isto. O menu (<ul>) possui seus itens (<li>). Os <li> por padrão, também possuem o valor block, mas se tratando de semântica visual, faz mais sentido dizer que um <li> é inline do que um <div>.

Neste caso, uma vou deixar uma dica/exemplo de como poderia fazer isto:

#menuBarWidget li {
    display: inline;
}
<div id="menuBarWidget">
    <ul>
        <li id="register">
            <a href="?action=register">Registro</a>
        </li>
        <li id="login">
            <a href="?action=login">Entrar</a>
        </li>
    </ul>
    <div id="loggedin" style="display: <?php echo $logged_display; ?>">
        <span id="username"><?php echo $logged_in_user; ?></span>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .