这是我的标记
<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>
更新
修复了上面的格式。很重要，因为它使用 white-space: pre在 CSS 中。
这是我的 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;
}
最佳答案
尝试将行高添加到.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>
<?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>
关于html - 使用 CSS 在 HTML 中文本不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1427426/