empêcher les div de prendre 100 % de largeur

Question

<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;">

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Hello<br />Hola

  </div>

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Another Sentence

  </div>

</div>

J'ai un problème : les bordures de la div intérieure s'étendent sur toute la largeur de la page, mais je veux qu'elles n'encadrent que le contenu à l'intérieur. Si j'utilise : display: inline les bordures encadrent chaque ligne séparément et se chevauchent, de sorte que cela ne fonctionne pas - quelqu'un peut-il m'aider ?

PS les styles ne sont pas déclarés comme ça dans le document original mais dans une feuille de style

Answer 1

Attribuer une largeur à l'élément en position absolue ? Si vous recherchez un emballage sous film rétractable, float:left ou display:inline-block sont parfaits pour cela.

Answer 2

Essayez display:inline-block , cela m'aide toujours dans des situations comme celle-ci.

http://jsfiddle.net/FaYLk/

Answer 3

Ce n'est pas aussi simple à faire :

 display: inline-block;

Vous devez faire plus que cela pour traverser le navigateur.

 display: inline-block;
display: -moz-inline-stack; /* for firefox 2 */
*display: inline; /* for ie 6 and 7 */

Answer 4

Mettez un récipient autour de tout le contenu. Par exemple

 <div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div>
.container{ display: inline-block; }