Como é que faz com que os elementos div apareçam em linha?
Dado este HTML:
<div>foo</div><div>bar</div><div>baz</div>
Como é que os fazes mostrar em linha como esta:
Foo bar baz
assim não.
Foo
bar
baz
19 answers
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 -->Um div inline é uma aberração da web & deve ser batido 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...
Tenta escrever assim:
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
br.
As minhas desculpas ao Darryl. Li class = "inline" como style= "display: inline". Você tem a resposta certa, mesmo que você use semanticamente nomes de classe questionáveis ;-)
A a falta de uso de br para fornecer layout estrutural em vez de para layout textual é muito prevalente para o meu gosto.
Se queres colocar mais do que elementos inline dentro desses divs então devias estar a flutuar esses div em vez de os fazeres inline.
Divs flutuados:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divs Inline:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Se estás atrás do primeiro, então esta é a tua solução e perdes as etiquetas br:
<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>
Note que a largura destas Divas é fluida, por isso sinta-se livre para colocar widths sobre eles se você quiser controlar o comportamento.
Obrigado., SteveUtilizar {[1] } com uma margem e uma pesquisa mediática para 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>
Deve utilizar {[4] } em vez de
<div>para uma forma correcta de inline . porque div é um elemento de nível de bloco, e sua exigência é para elementos de nível de bloco inline.
Aqui está o código html de acordo com os seus requisitos:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
- usando o simples
display:inline-block; - ou utilizar
float:left;
display:inline-block;
Exemplo um
div {
display: inline-block;
}
Exemplo dois
div {
float: left;
}
Tens de limpar o carro flutuante
.main-div:after {
content: "";
clear: both;
display: table;
}
Como mencionado, Exibir: inline é provavelmente o que você quer. Alguns navegadores também suportam blocos em linha.
<span> ?
Basta usar um filtro de papel 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>
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
Usaria espansos ou flutuaria o div para a esquerda. O único problema com o flutuante é que você tem que limpar o flutuador depois ou o div contendo deve ter o estilo de transbordamento definido para auto
Ver, por exemplo,/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html ( classe goog-inline-block ; eu abreviá-la ao 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; }
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 de raio-contorno são opcionais e só funcionam nos navegadores conformes com o CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
Note-se que os divs " foo "" bar " e " baz "são detidos dentro do div "contain".
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<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>
<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 */
Eu apenas tendem a fazer widths fixos de modo que eles somam até a largura total da página - provavelmente só funciona se você estiver usando uma página de Largura Fixa. Também "flutuar".
Acho que podes usar este caminho sem usar nenhum css -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>