CSS：Div宽度与其内容一样宽

我对div的宽度有问题，我希望div的宽度等于它的内容宽度。CSS：Div宽度与其内容一样宽

我遇到的问题是，如果我将浏览器的大小调整为1024的宽度，则内容不再浮动，这是正确的，但我需要围绕它的div宽度与内容一样宽。

这里是代码即时通讯使用来测试它：

在此先感谢！

<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>

来源

2013-02-04 James Carter

为了防止这样的事情的内容错位时窗口被调整大小以低的大小，使用min-width。这样，就可以将广告内容，但你设定的最小宽度，让您的内容没有得到“挤” ......

来源

2013-02-04 15:01:17 Ivozor

然后内部的内容也将这个最小宽度的大小，什么都不会帮助我解决问题.. –

什么@lvozor表示同意，

您的标记变得像这个：

<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>

来源

2013-02-04 15:41:29

CSS：Div宽度与其内容一样宽

回答

相关问题