Como você faz os elementos div serem exibidos em linha?

254

Dado este HTML:

<div>foo</div><div>bar</div><div>baz</div>

Como você os faz exibir em linha assim:

foo bar baz

Assim não:

foo
bar
baz

css line html

— Steve
fonte

268

Isso é outra coisa então:

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

Expandir snippet

— Darryl Hein
fonte

na verdade, esta era a única maneira que eu encontrei para exibir em linha corretamente eu não sei por que a solução não-float não funcionou ....

— Necronet

23

Os nomes de classe css aqui não devem ser usados como exemplo. Use nomeação semântica apropriada como: css-tricks.com/semantic-class-names

— Berik

261

Uma div embutida é uma aberração da web e deve ser derrotada até que se torne uma extensão (pelo menos 9 vezes em 10) ...

<span>foo</span>
<span>bar</span>
<span>baz</span>

... responde à pergunta original ...

— bochgoch
fonte

11

Há momentos em que você deseja que os divs sejam exibidos em linha, por exemplo, quando deseja adicionar uma margem à esquerda e à direita de um elemento. Eu não acho que isso possa ser feito com uma extensão. Steve provavelmente deveria estar usando float em vez de inline.

— Darryl Hein

8

preenchimento sim, não margem

— Andreas Wong

8

Infelizmente, o HTML5 não suporta a inserção de uma div dentro de uma <span>. Eu costumava usar <span> s para colocar estilos CSS em uma seção e não fazer o navegador interpretar a seção como um bloco e forçar seu layout de bloco em mim. Mas acabei de descobrir hoje, ao portar minha página para o JQuery Mobile + HTML5, que se você tiver um <div> dentro de um <span>, o validador HTML5 reclamará que ele é HTML5 inválido; portanto, há casos em que o uso da tag <span> em vez de um inline <div> não é viável, pelo menos com HTML5.

— Kreixner

4

Às vezes, embora você esteja vivendo em um mundo que você não criou e a única coisa que pode mudar no CSS. Nesse caso, style = "display: inline" funciona bem.

— Matthew Bloqueio

3

Se você não está 'preso' com o uso de divs, esta é uma boa resposta. Mas pode haver várias razões pelas quais você precisa usar divs, mas precisa que elas apareçam como elementos embutidos.

— Bobble

174

Tente escrever assim:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

Expandir snippet

— Randy Sugianto 'Yuku'
fonte

16

Esta é a resposta correta para a pergunta, mas, considerando a resposta aceita, suspeito que a pergunta não atenda ao cenário real.

— Steve Perks

34

Depois de ler esta pergunta e as respostas algumas vezes, tudo o que posso fazer é supor que houve algumas edições em andamento, e minha suspeita é que você recebeu a resposta incorreta com base em não fornecer informações suficientes. Minha pista vem do uso de brtags.

Desculpas a Darryl. Eu li class = "inline" como style = "display: inline". Você tem a resposta certa, mesmo que use nomes de classe semanticamente questionáveis ;-)

O uso incorreto de brfornecer um layout estrutural em vez de textual é muito prevalente para o meu gosto.

Se você deseja colocar mais do que elementos embutidos dentro deles divs, deve flutuar esses divs em vez de torná-los embutidos.

Divs flutuantes:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

Divs em linha:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

Se você está atrás do anterior, esta é a sua solução e perde essas brtags:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

observe que a largura dessas divs é fluida; portanto, sinta-se à vontade para colocar larguras nelas, se você quiser controlar o comportamento.

Obrigado Steve

— Steve Perks
fonte

24

Use display:inline-blockcom uma consulta de margem e mídia para o IE6 / 7:

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

— Paul Sweatte
fonte

11

Você deve usar em <span>vez de usar <div>a maneira correta de alinhar . porque div é um elemento de nível de bloco e sua exigência é para elementos de nível de bloco embutido.

Aqui está o código html conforme seus requisitos:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

Você tem duas maneiras de fazer isso

usando simples display:inline-block;
ou usando float:left;

então você deve alterar a propriedade de exibição display:inline-block;com força

Exemplo um

div {
    display: inline-block;
}

Exemplo dois

div {
    float: left;
}

você precisa limpar o flutuador

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

— Hidayt Rahman
fonte

7

Como mencionado, display: inline é provavelmente o que você deseja. Alguns navegadores também suportam blocos embutidos.

http://www.quirksmode.org/css/display.html#inlineblock

— Kevin
fonte

3

@NexusRex, existem soluções para que o IE se comporte corretamente, no entanto, é exibido: inline é a resposta correta. Acredito que a solução alternativa é: display: bloco inline; * display: em linha; * zoom: 1; definir o zoom força o IE a tratar o elemento como um elemento de bloco.

— Chris Stephens

7

Basta usar uma div wrapper com "float: left" e colocar caixas dentro também contendo float: left:

CSS:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

HTML:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

— A. Bender
fonte

6

<span> ?

— Pirat
fonte

2

Acho que estamos falando de elementos de bloco embutidos que podem ter largura e altura. Imagine uma div com uma imagem de fundo que você deseja fluir alinhada com o texto.

— NexusRex 3/08

6

Tudo bem, por mim :

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

— flairon
fonte

4

Eu usaria vãos ou flutuaria a div esquerda. O único problema com a flutuação é que você precisa limpar a flutuação posteriormente ou a div que contém deve ter o estilo de estouro definido como automático

— Cam Tullos
fonte

Acredito que estamos falando de uma div embutida com texto ou outro, não flutuada para o lado.

— NexusRex 3/08

Ao usar float: left, com overflow: auto na div que contém, como / quando a barra de rolagem em que o overflow poderia entrar em ação?

— Cellepo # 22/14

3

Sei que as pessoas dizem que essa é uma péssima idéia, mas na prática pode ser útil se você quiser fazer algo como imagens de ladrilhos com comentários embaixo delas. por exemplo, o Picasaweb usa-o para exibir as miniaturas em um álbum.
Veja por exemplo / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (classe goog-inline-block; abrevio para ib aqui)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

Dado esse CSS, defina sua div para a classe ib, e agora é magicamente um elemento de bloco embutido.

— David Eison
fonte

3

Você precisa conter os três divs. Aqui está um exemplo:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

Nota: os atributos border-radius são opcionais e funcionam apenas em navegadores compatíveis com CSS3.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Observe que os divs 'foo' 'bar' e 'baz' são mantidos dentro da div 'contém'.

— word5150
fonte

2

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

— Darryl Hein
fonte

2

Eu acho que você pode usar dessa maneira sem usar nenhum css -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

No momento, você está usando o elemento de nível de bloco dessa maneira para obter resultados indesejados. Então você pode inline elemento como extensão, pequeno etc.

<span>foo</span><span>bar</span><span>baz</span>

— Pankaj Bisht
fonte

0

nós podemos fazer isso como

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

— onipotente
fonte

0

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

— Ipog
fonte

0

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

— Waah Ronald
fonte

-1

Eu apenas tendem a torná-las larguras fixas, para que elas aumentem a largura total da página - provavelmente só funciona se você estiver usando uma página de largura fixa. Também "flutuar".

— NFPPW
fonte