Como você faz com que os elementos div sejam exibidos inline?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Dado este HTML:
<div>foo</div><div>bar</div><div>baz</div>
Como você faz com que eles sejam exibidos inline assim:
foo bar baz
Assim não:
foo
bar
baz
Solução
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 -->Outras dicas
Uma div em linha é uma aberração da web e deve ser espancada até que se torne um período (pelo menos 9 vezes em 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>
... responde à pergunta original ...
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>Depois de ler esta pergunta e as respostas algumas vezes, tudo o que posso fazer é presumir que houve muitas edições em andamento e suspeito que você recebeu a resposta incorreta por não fornecer informações suficientes.Minha pista vem do uso de br marcação.
Desculpas a Darryl.Eu li class="inline" como style="display:em linha".Você tem a resposta certa, mesmo que use nomes de classes semanticamente questionáveis ;-)
A falta de uso de br fornecer layout estrutural em vez de layout textual é predominante demais para o meu gosto.
Se você deseja colocar mais do que elementos embutidos dentro desses divs então você deveria estar flutuando aqueles divs em vez de torná-los inline.
Mergulhos flutuantes:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divisões embutidas:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Se você está atrás do primeiro, então esta é a sua solução e perca aqueles br Tag:
<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 desses divs é fluida, então sinta-se à vontade para colocar larguras neles se quiser controlar o comportamento.
Obrigado, Steve
Usar display:inline-block Com uma margem e consulta de 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>
Você deveria usar
<span>ao invés de<div>Para uma maneira correta de em linha. Porque o DIV é um elemento de nível de bloco e seu requisito é 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ê muda a propriedade de exibição display:inline-block; vigorosamente
Exemplo um
div {
display: inline-block;
}
Exemplo dois
div {
float: left;
}
você precisa limpar flutuação
.main-div:after {
content: "";
clear: both;
display: table;
}
Como mencionado, exibição: Inline é provavelmente o que você deseja. Alguns navegadores também suportam blocos embutidos.
Basta usar uma divadia com "Float: Left" e colocar caixas dentro também contendo flutuação: esquerda:
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>
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>
<span> ?
Eu usaria vãos ou flutuava à divisão à esquerda. O único problema com flutuação é que você precisa limpar o flutuador depois ou a div contêmia deve ter o estilo de transbordamento definido para automaticamente
Eu sei que as pessoas dizem que essa é uma idéia terrível, mas, na prática, pode ser útil se você quiser fazer algo como imagens de ladrilhos com comentários por baixo deles. Por exemplo, Picasaweb o usa para exibir as miniaturas em um álbum.
Veja por exemplo/demonstração http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (Classe goog-in-inline-Block; eu abreviço-o 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 que o CSS, defina seu div como a classe IB e agora é magicamente um elemento de bloco em linha.
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 do radiato de fronteira são opcionais e só funcionam 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 do 'contêm' div.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
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 está obtendo resultado indesejado. Então você pode você pode ser um elemento embutido, como span, pequeno etc.
<span>foo</span><span>bar</span><span>baz</span>
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>
<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 torná -los larguras fixas para que elas aumentem a largura total da página - provavelmente funcionam apenas se você estiver usando uma página de largura fixa. Também "flutuar".
