CSS阻止我的DIV崩溃

Question

我有Jquery，当你点击h3标签时，它会隐藏该div。我遇到的问题是有白色空间：pre阻止我崩溃div。我一直在疯狂地想弄清楚，但我无法找到解决方案。

这是我的HTML代码：

<!-- first file -->
      <div class="file_wrapper">
        <h2>Previous Version of Pre.report.txt</h2>
        <div class="file_inner">
        <ol class="ol_counter">
<div  style="width: 100%" class="block1"><h3> Result </h3>
<li>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>
<div  style="width: 100%" class="block2"><h3> Result </h3>
<li>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>
<div  style="width: 100%" class="block3"><h3> Result </h3>
<li>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>                </div>                                                                                                    
              </div>
              </div>

问题出在.file_wrapper {white-space：pre;}

上

如果我删除它，文本将不会保留格式。

我想要这样的事情： demo

这是我的代码：demo 2

先谢谢你，让我知道我是css或html的专家。我只是编写了一个perl脚本输出，以便在html上看起来不错。

Answer 1

如果您必须保持html原样，这里有一个适合您需求的CSS解决方案。

我修改了你的小提琴：

1. 已移除white-space: pre;
上的.file_wraper
2. 在margin-left
上将0更改为.file_wrapper h2
3. 在margin:0;
上设置li
4. 在margin: 0 0 0px 30px;
上设置.file_wrapper h3

请参阅 FIDDLE