文本未使用 CSS 在 HTML 中对齐答案

【问题标题】：Text not aligning in HTML using CSS文本未使用 CSS 在 HTML 中对齐
【发布时间】：2019-04-23 03:49:11
【问题描述】：

这是我的标记

     <div class="code php">
        <div class="container">
        <div class="line-numbers">1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    <?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?>
        </code>
        </div>
        </div>

更新

上面的固定格式。很重要，因为它在 CSS 中使用了white-space: pre。

这是我的 CSS

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.1em;
    padding: 0.8em;

}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code,
.code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0.8em;
    color: #ccc;
}

这就是正在发生的事情！

damn http://alexanderdickson.com/so.png

请注意行号不匹配？它曾经完美地工作。我最近经常玩它，让自己添加一个标题，我想我已经搞砸了。（我确实需要研究版本控制！）

谁能看到我做错了什么？我已经尝试了行高、填充等，并尽我所能使用 Firebug 进行了检查。

谢谢

另一个更新

此处的真实示例：http://www.alexanderdickson.com/articles/php/exiting-a-loop-early/

注意：我已尝试删除所有代码格式（所有<spans> 等）但仍然存在问题！

已修复

它现在正在使用这个 CSS

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;
    white-space: pre;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;

}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    width: 2em;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

【问题讨论】：

如果您的唯一目标是显示代码，那么为什么不使用 syntaxhighlighter。 alexgorbatchev.com/wiki/SyntaxHighlighter是最简单高效的代码展示方式。

标签： html css firebug

【解决方案1】：

尝试将行高添加到 .line-numbers

这对我有用：

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;

}

code {
margin: 0;
padding: 0;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code, .code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    line-height:1.5em;
    padding-top: 2px;
    width: 20px;
}

我会尝试发布截图。

这是我的 HTML：

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>    
 <div class="code php">
        <div class="container">
        <div class="line-numbers">
 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    &lt;?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?&gt;
        </code>
        </div>
    </div>
</div>
</body>

【讨论】：

它应该继承它。当我也在 Firebug 中查看计算样式时，它们完全相同（在 <code> 和 <div class="line-numbers"> 中）
我知道“应该”，但你试过了吗？
@Martin - 不，我没试过。将很快测试。如果可行，我会接受你的回答。 +1 回来更新：）谢谢
我已将您的 CSS 放入其中，虽然其中一些排列整齐，但并非全部排列！很郁闷！
我同意 Martin 的观点，这绝对是行高的问题，但不同的字体大小也会影响所有内容的排列方式。我会以div.container > div, div.container > code { line-height: 1.5em; font-size: 12px; } 的方式进行 smt

【解决方案2】：

你在你的css中调用了一个类“.code”，但code是一个标签而不是一个类，所以它只是你css中的“code”

【讨论】：

我都有 - 主 div 的类是代码，我有一个嵌套在其中的代码元素。

【解决方案3】：

你的班级有一个空格：“code php”

[编辑：不喝咖啡]

消除复杂性。您的代码类定义中有什么？在你的 php 类定义中？如果 php 排在第二位，而您正在更改代码，则您的更改将不会显示。旁注：使用比代码更具描述性的内容，因为代码是元素名称。我很确定这无关紧要，但它有助于提高可读性并防止简单的错误，例如代码和 .code 之间的差异，更不用说#code。

【讨论】：

这是有效的。我有 2 节课。
这只是多个类名：w3.org/TR/html401/struct/global.html#adef-class
所以这个答案很糟糕。对不起，伙计们。