Display: inline; bordi doppi

[Uanne]

Ciao, ho usato la proprietà inline per disporre dei 'div' senza andare a capo. Questo è il css:

#inlinea{
display: inline;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: Black;
padding: 6px;
}

E questo è il risultato:



Come si noterà, dove i box si toccano il bordo diventa doppio.
Occorre per forza dare 0px al bordo destro e usare un ID a parte per l'ultimo box, che dovrà avere tutti e quattro i bordi di 1px, o c'è una strada più veloce?

Grazie

[DYNAM!C+]

ma se usi una tabella (con quattro celle) ?

[Rommel]

ciao,
prima di tutto dovresti usare le classi non gli id perché i div sono 4 e non 1.

.inlinea{
display: inline;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: Black;
padding: 6px;
}

.inlinea:first-child {
border-left:1px;
}

n.b. prova su firefox perché ie non supporta la pseudo-classe first-child

[floyd46]

puoi ottenere quello che vuoi in questo modo:
al secondo box devi dikiarare il border-left:0; così anche per il 3° e il 4°. Prova a vedere cosa viene fuori.
ciao

[span]

o:

#inlinea{
  border: 1px solid #000;
  border-right: none;
}
#inlinea div{
  display: inline;
  border-right: 1px solid #000;
  padding: 6px;
}

<div id="inlinea">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

[Uanne]

grazie a tutti dei preziosi consigli

[Uanne]

Questa proprietà mi sta dando altri problemi con Firefox:

non mi prende le altezze e le larghezze dei box e se metto del testo dentro, mi interseca le righe andando tutto a capo

[span]

sì, devi usare il float al posto di display: inline

[Uanne]

Grazie span, ma comincio a pensare che sia un forte limite questo.

Ho notato infatti che su Firefox, se c'è troppo testo in un div con il float, questi, allungandosi, oltrepassa il div in cui è contenuto, dando luogo a spiacevoli inconvenienti di layout.

Ciauz

[span]

Originariamente inviato da Uanne
Grazie span, ma comincio a pensare che sia un forte limite questo.

Ho notato infatti che su Firefox, se c'è troppo testo in un div con il float, questi, allungandosi, oltrepassa il div in cui è contenuto, dando luogo a spiacevoli inconvenienti di layout.

Ciauz

già, per quello che vuoi attenere l'ideale mi sembra una tabella.

altrimenti o usi la proprietà overflow, o usi un annidamento particolare in cui però devi sapere quale sarà il div con più contenuti. Più semplice una tabella.