使用CSS在HTML中对齐文本

问题描述 投票：0回答：3

这是我的标记

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

UPDATE

修复了上面的格式。很重要因为它在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;
}
html css firebug
3个回答
2
投票

尝试将行高添加到.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>

alt text

1
投票

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

0
投票

你的课堂上有一个空间：“code php”

[编辑：没有咖啡]

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.