CSS: Div largeur aussi large que son contenu

J'ai un problème avec la largeur d'un div, je veux avoir la largeur de la div égale à la largeur de son contenu. Le problème que j'ai, c'est que si je redimensionne le navigateur jusqu'à une largeur de 1024, le contenu ne flottera plus, ce qui est correct, mais j'aurais besoin que le div soit aussi large que son contenu.CSS: Div largeur aussi large que son contenu

Voici le code im en utilisant pour le tester:

Merci d'avance !!!

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Content with Menu</title> 
    <style type="text/css"> 
     .box { 
      border: 1px solid #AAA; 
      border-radius: 4px; 
      padding: 10px; 
      margin-bottom: 20px; 
      display: -moz-inline-stack; 
      display: inline-block; 
      vertical-align: top; 
      zoom: 1; 
      *display: inline; 
     } 

     div.box ol li label { 
      font-size: 12px; 
      position: relative;   
      float: left; 
      width: 11em; 
      margin-right: 1em; 
      padding-top: 0.5em; 
     } 

     input { 
      border:1px solid #CCC; 
      font: 12px Arial,Helvetica,sans-serif; 
      width: 160px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="box"> 
      <ol> 
       <li> 
        <label> 
        TEST 1.1 
        </label> 
        <input type="text" disabled="disabled" /> 
        <input type="text"/> 
        <span></span> 
        <span></span> 
       </li> 
       <li> 
        <label> 
         TEST 1.2 
        </label> 
        <input/> 
       </li> 
       <li> 
        <label> 
         TEST 1.3 
        </label> 
        <input/> 
       </li> 
      </ol> 
     </div> 

     <div class="box"> 
      <ol> 
       <li> 
        <label> 
        TEST 2.1 
        </label> 
        <input type="text" disabled="disabled" /> 
        <input type="text"/> 
        <span></span> 
        <span></span> 
       </li> 
       <li> 
        <label> 
         TEST 2.2 
        </label> 
        <input/> 
       </li> 
       <li> 
        <label> 
         TEST 2.3 
        </label> 
        <input/> 
       </li> 
      </ol> 
     </div> 
    </div> 
</body>

Source

2013-02-04 James Carter

Pour éviter de telles choses de contenu lorsque égarée fenêtre est redimensionnée à une taille basse, utilisez min-width. De cette façon, vous pouvez étendre votre contenu, mais vous définir une largeur minimum, de sorte que votre contenu ne reçoit pas « pressé » ...

Source

2013-02-04 15:01:17 Ivozor

Puis le contenu intérieur serait également dimensionné à cette min-largeur, ce qui ne m'aiderait pas à résoudre le problème .. –

d'accord avec ce que @lvozor dit,

votre balisage est comme devenir ceci:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Content with Menu</title> 
    <style type="text/css"> 
     .box { 
      border: 1px solid #AAA; 
      border-radius: 4px; 
      padding: 10px; 
      margin-bottom: 20px; 
      display: -moz-inline-stack; 
      display: inline-block; 
      vertical-align: top; 
      zoom: 1; 
      *display: inline; 
     } 

    div.box ol li label { 
     font-size: 12px; 
     position: relative;   
     float: left; 
     width: 11em; 
     margin-right: 1em; 
     padding-top: 0.5em; 
    } 

    input { 
     border:1px solid #CCC; 
     font: 12px Arial,Helvetica,sans-serif; 
     width: 160px; 
    } 
</style> 
</head> 
<body> 
<div class="box" style="min-width:1024px;"> 
    <div class="box"> 
     <ol> 
      <li> 
       <label> 
       TEST 1.1 
       </label> 
       <input type="text" disabled="disabled" /> 
       <input type="text"/> 
       <span></span> 
       <span></span> 
      </li> 
      <li> 
       <label> 
        TEST 1.2 
       </label> 
       <input/> 
      </li> 
      <li> 
       <label> 
        TEST 1.3 
       </label> 
       <input/> 
      </li> 
     </ol> 
    </div> 

    <div class="box"> 
     <ol> 
      <li> 
       <label> 
       TEST 2.1 
       </label> 
       <input type="text" disabled="disabled" /> 
       <input type="text"/> 
       <span></span> 
       <span></span> 
      </li> 
      <li> 
       <label> 
        TEST 2.2 
       </label> 
       <input/> 
      </li> 
      <li> 
       <label> 
        TEST 2.3 
       </label> 
       <input/> 
      </li> 
     </ol> 
    </div> 
</div> 
</body>

Source

2013-02-04 15:41:29

CSS: Div largeur aussi large que son contenu

Répondre

Questions connexes