个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
中同一行中未对齐的
转载
作者：太空宇宙
更新时间：2023-11-03 21:05:04
24
4
我的博客遇到了一些 CSS 问题，该博客基于 Cayman 主题。
我遇到的问题是，在使用 Jekyll 启用行号后，代码块严重错位，如下图所示。
我的目标是让它看起来像这样:
我在 Developer Console 中注意到，由于额外的代码块，代码块呈现得很糟糕:
这是生成第一张图片的最少代码。
.main-content {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
background-color: rgba(255, 255, 255, 0.95);
max-width: 64rem;
padding: 3rem 6rem;
font-size: 1.1rem;
margin: 0 auto 3rem;
border-radius: 4rem;
}
.main-content :first-child {
margin-top: 0;
}
.main-content code {
padding: 2px 4px;
font-family: monospace;
font-size: 0.95em;
color: #567482;
background-color: #f3f6fa;
border-radius: 0.3rem;
}
.main-content pre:not(.highlight) {
max-height: 30rem;
margin-top: 0;
margin-bottom: 1rem;
font: 0.95em monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dcf0e6;
border-radius: 0.5rem;
padding: 0.8rem;
overflow: auto;
line-height: 1.45;
-webkit-overflow-scrolling: touch;
}
.main-content pre:not(.highlight) > code {
padding: 0;
margin: 0;
font-size: inherit;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.main-content .highlight {
background-color: #f3f3f3;
margin-bottom: 1rem;
}
.main-content .highlight pre:not(.highlight) {
margin-bottom: 0;
word-break: normal;
padding: 0.8rem;
overflow: auto;
font-size: 0.95em;
line-height: 1.45;
border-radius: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.main-content pre code {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.main-content table {
border-spacing: 0;
}
.main-content .highlight table th, .main-content .highlight table td {
padding: 0;
border: none;
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71;
background-color: #15CC57;
background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title title title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#159A34">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="main-content blog-post">
<div class="language-vb highlighter-rouge">
<div class="highlight"><pre class="highlight"><code>
<table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
</td>
<td class="rouge-code">
<pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
</td>
</tr>
</tbody>
</table>
</code></pre>
</div>
</div>
</section>
</body></html>
特殊要求:由于HTML是Jekyll生成的，我不方便修改。我需要纯 CSS 调整。
注意:由于本人对CSS知识不多，以上文件是从真实页面中减去代码生成的。我试图切断所有不必要的东西，但我不确定它是否是最低限度的。
最佳答案
现有答案提供了很好的提示，我很惊讶地发现最佳答案如此简单:
pre.highlight {
white-space: normal;
}
<pre class="highlight"> 中的空格不再“堆叠”并创建大量空白区域。
.main-content {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
background-color: rgba(255, 255, 255, 0.95);
max-width: 64rem;
padding: 3rem 6rem;
font-size: 1.1rem;
margin: 0 auto 3rem;
border-radius: 4rem;
}
.main-content :first-child {
margin-top: 0;
}
.main-content code {
padding: 2px 4px;
font-family: monospace;
font-size: 0.95em;
color: #567482;
background-color: #f3f6fa;
border-radius: 0.3rem;
}
.main-content pre:not(.highlight) {
max-height: 30rem;
margin-top: 0;
margin-bottom: 1rem;
font: 0.95em monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dcf0e6;
border-radius: 0.5rem;
padding: 0.8rem;
overflow: auto;
line-height: 1.45;
-webkit-overflow-scrolling: touch;
}
.main-content pre:not(.highlight) > code {
padding: 0;
margin: 0;
font-size: inherit;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.main-content .highlight {
background-color: #f3f3f3;
margin-bottom: 1rem;
}
.main-content .highlight pre:not(.highlight) {
margin-bottom: 0;
word-break: normal;
padding: 0.8rem;
overflow: auto;
font-size: 0.95em;
line-height: 1.45;
border-radius: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.main-content pre code {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.main-content table {
border-spacing: 0;
}
.main-content .highlight table th, .main-content .highlight table td {
padding: 0;
border: none;
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71;
background-color: #15CC57;
background-image: /*url("https://ibug.github.io/image/bg.jpg"), */ linear-gradient(120deg, #155799, #15CC57);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
pre.highlight {
white-space: normal;
}
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title title title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#159A34">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="main-content blog-post">
<div class="language-vb highlighter-rouge">
<div class="highlight"><pre class="highlight"><code>
<table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
</pre>
</td>
<td class="rouge-code">
<pre><span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
<span class="n">asdfghjkl</span>
</pre>
</td>
</tr>
</tbody>
</table>
</code></pre>
</div>
</div>
</section>
</body></html>
关于html - <pre><code> 中同一行中未对齐的 <td>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54604957/
24
4
0
文章推荐： opencv - CNN面部表情识别数据准备
-
html - 为什么
我正在用一个 TD 和一个 colspan 属性替换多个 TD。 然而，这呈现完全不同。 我不明白为什么 不同于 我的问题是前 2 个 TD 的宽度之和与 colspanned TD 的宽度不同。
-
python - Django 。如何在html
name value date 我想这是个愚蠢的问题，但我是 json 的新手，所以任何答案都会有所帮助。 我有 json 文件: `{"aaData": [ [1, "70.1700", "2008-12-29 11:23:00"
-
ruby - 当任何
.. 值已知时，是否可以找到 .. 文本？
我有一个类似 html 的网页格式如下: .... . . . alo foo bla bla 现在，我只知道值 bla bla , 根据该值我们可以跟踪或找到 3rd
-
javascript - 将具有类名的特定 td 之后的所有 td 替换为带有输入的新 td
我有以下 html 代码: Add New Item test test test test test test test te
-
javascript - 在 td 中单击时如何在 td 中获取字符串，该 td 晚于第一个 td 但在同一 tr 中？
Name1 Position1 Operation1 Name2 Position2
-
如果 td 与同一行上的另一个 td 不同，jQuery 会突出显示 td
如果其中的数据与同一行上第三列 td 内的数据匹配，我需要做的是向第一列 td 添加一个类。 http://jsfiddle.net/rUssu/ html 表格 firstsecondthi
-
html - 有没有办法清除/隐藏两个 td 表中的第一个 td，而无需访问第一个 td？
有什么方法可以清除或隐藏第一个 td 的内容，从双列表中的第二个 td，而无需对实际 td 的任何编辑权限？ 所以我想隐藏下表中的数字 1. Content
-
html - 当第一个 `
` 的高度大于第二个 ` ` 时，如何将第二个 ` ` 中的元素对齐到左上角
当第一个高度大于第二个 , 包含第二个文本 与中心对齐。我想要第二个 的文本或元素当第一个 对齐到左上角的高度大于秒。 我如何使用 css 来做到这一点？ ？ HTML5, CSS3 an
-
javascript - 有没有办法在选择按钮并且
显示为无时显示 ？ ( 中将有一个 codeMirror 文本区域)
我这里遇到了一些麻烦。我正在开发一个按钮，一旦选择该按钮将运行 JavaScript 函数 - ShowColumn() - 这将使表格列出现。表格列首先将被隐藏 - “display:none;”
-
html - 如何将 100% 宽度设置为第一个表 td 并使其他 td 低于第一个 td
我需要将第一个 td 设为 100% 宽(包括图像)并将其他 td 放在第一个 td 下方。如何在不更改 HTML 的情况下执行此操作？ 这是我的: #katalogas { float:left;
-
java - 我想在 td 中放置一个动态值，在一个表中有很多 td，但我想将该值放置在特定的 td 中
用于创建规则列表的Java类 public class CompArray { public ArrayList a1= new ArrayList(); public CompArray (){
-
css - 如何更改所有 td 的背景，在特定 td 之前，将鼠标悬停在该 td 上
我想在悬停在特定 td 上时更改特定 td 之前所有 td 的背景颜色。 因此，当我将鼠标悬停在该图标上时，该特定行中它之前的所有图标和文本都会更改它们的背景。 任何人都可以建议如何实现它。 这是我的
-
jquery - 如何使用 jquery 捕获 td 元素中的值并根据捕获的 td 值更改另一个 td 元素的背景颜色？
我今天花了一些时间查看使用 JQuery 遍历表及其行的示例，经过大量试验后我能够做到这一点。但是我在尝试从 td 元素获取值时遇到问题，因此我可以更改为另一个 td 元素的颜色。我有一个绑定(bin
-
HTML 第一个表格列如何反转 "td + td"？
这个问题在这里已经有了答案: Is there a "previous sibling" selector? (32 个答案) 关闭 7 年前。 我正在构建一个与此类似的表: td
-
html - 使用 td 内的 div 定义 td 宽度 VS 在 td 本身上定义宽度？
当我想设置 td 的宽度时，我将 td 设置为如下宽度: ... 我已经看到通过添加一个空的 div 来设置 td 宽度: some text .h-间隔符{ 高度:0； 宽度:0； 溢
-
javascript - 如何从
获取特定的 HTML 控件并将所选控件附加到同一个 中？
我有以下 HTML 表格: Products Pack Of Quantity Volume Unit Reb
-
html - 将 CSS 应用于 TD 中的数据，但不应用于 TD。需要在每个 TD 中提高文本基线。 Maby 文本属性选择器
我需要提升文本，但如果我将类应用于 IE、Opera 和 Chrome 中的 TD 或 TR，则所有单元格都会提升(背景和边框以及单元格中的文本)。请看例子: Untitled D
-
javascript - 在除第一个 td 的 margin-top 和最后一个 td 的 margin-bottom 之外的所有 td 之间放置边距
我试图在所有 之间放置边距除了 的 margin-top在第一行， 的底部边距在最后一行。那可能吗？谢谢。 table { border: 1px solid black; width: 98%;
-
javascript - 如何获取
我需要发布我的 td 标签的这些值，因为这是一个使用 jquery 的可编辑表。我不确定这里的问题是脚本还是 td 标签？目前我的 var_dump($_POST) 没有返回任何值。 参见下面的代码，
-
javascript - 检查 td 是否是最后可见的 td
我想检查当前网格单元格是否是行中最后一个可见单元格。 //accurately confirms if cell is the last cell in the row, assuming there
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
滴滴打车优惠券免费领取
我是一名优秀的程序员,十分优秀！