使用CSS在HTML中不对齐文本
这是我的标记
<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;
}这就是正在发生的事情！
该死的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;
}回答 3
Stack Overflow用户
发布于 2009-09-15 14:12:46
尝试将行高添加到.line中
这对我来说很管用：
.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>
<?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>
</div>
</body>
Stack Overflow用户
发布于 2009-09-15 14:18:36
在css中调用类".code“，但是代码是标记而不是类，所以它只是css中的”代码“。
Stack Overflow用户
发布于 2009-09-15 14:18:58
类中有一个空格："code php“。
编辑:没有咖啡
消除复杂性。您的代码类定义是什么？在php类定义中？如果php在第二位，而您正在更改代码，则您的更改将不会显示。附带注意:使用比代码更具有描述性的内容，因为代码是一个元素名。我确信这并不重要，但它有助于提高可读性，防止代码和.code之间的差异等简单的错误，更不用说#代码了。
https://stackoverflow.com/questions/1427426
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号