查看移动浏览器时,Ipython/Jupyter Notebook HTML未对齐
BCR*_*BCR 8 html css python ipython jupyter
Windows 8.1, Python 3.4, Jupyter Notebook
我正在使用github上托管的自定义CSS样式表来以HTML格式呈现笔记本.当我下载HTML并查看桌面浏览器上的文件时,代码,文本,标记和图像会正确对齐和格式化.然而,当我在移动浏览器上查看相同的笔记本时,笔记本似乎有一个巨大的左边距填充,并且不再与背景正确对齐.
任何帮助解决这个问题将不胜感激.我附上了图像样本和我的Jupyter/IPython CSS样式表供参考.谢谢.
在桌面浏览器上
在移动浏览器上
我的Ipython/Jupyter Notebook CSS样式表复制如下:
<style>
div.cell{
width: 1000px; /* altered from 850px*/
margin-left: 0%!important; /*altered from 10%*/
margin-right: 5%; /*altered from auto%*/
}
/*div.text_cell{added from frankcleary.com but didn't look great for current setup
margin-top:-2px;
margin-bottom:-2px;
padding-top:2px;
padding-bottom:2px;
border-left:2px solid #505050;
border-collapse:collapse;
border-top:none;
border-bottom:none;
}*/
h1 {
font-family: "Open sans",verdana,arial,sans-serif;
}
.text_cell_render h1 {
font-weight: 200;
font-size: 40pt;
line-height: 100%;
color:#447adb;
margin-bottom: 0em;
margin-top: 0em;
display: block;
white-space: nowrap;
}
h2 {
font-family: "Open sans",verdana,arial,sans-serif;
text-indent:1em;
}
.text_cell_render h2 {
font-weight: 200;
font-size: 20pt;
font-style: italic;
line-height: 100%;
color:#447adb;
margin-bottom: 1.5em;
margin-top: 0.5em;
display: block;
white-space: nowrap;
}
h3 {
font-family: "Open sans",verdana,arial,sans-serif;
}
.text_cell_render h3 {
font-weight: 300;
font-size: 18pt;
line-height: 100%;
color:#447adb;
margin-bottom: 0.5em;
margin-top: 2em;
display: block;
white-space: nowrap;
}
h4 {
font-family: "Open sans",verdana,arial,sans-serif;
}
.text_cell_render h4 {
font-weight: 300;
font-size: 16pt;
color:#447adb;
margin-bottom: 0.5em;
margin-top: 0.5em;
display: block;
white-space: nowrap;
}
h5 {
font-family: "Open sans",verdana,arial,sans-serif;
}
.text_cell_render h5 {
font-weight: 300;
font-style: normal;
color: #1d3b84;
font-size: 16pt;
margin-bottom: 0em;
margin-top: 1.5em;
display: block;
white-space: nowrap;
}
div.text_cell_render{
font-family: "Open sans",verdana,arial,sans-serif;
line-height: 135%;
font-size: 125%;
width:750px; /* altered from 750px */
margin-left:auto;
margin-right:auto;
text-align:justify;
text-justify:inter-word;
}
div.output_subarea.output_text.output_pyout {
overflow-x: auto;
overflow-y: scroll;
max-height: 300px;
}
div.output_subarea.output_stream.output_stdout.output_text {
overflow-x: auto;
overflow-y: scroll;
max-height: 300px;
}
div.output_subarea.output_html.rendered_html {
overflow-x: scroll;
max-width: 100%;
overflow-y: scroll;/* was commented out */
max-height: 300px;/* was commented out */
}
code{
font-size: 78%;
}
.rendered_html code{
background-color: transparent;
white-space: inherit;
}
ul{
/* color:#447adb; */
margin: 2em;
}
ul li{
padding-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
ul li li{
padding-left: 0.2em;
margin-bottom: 0.2em;
margin-top: 0.2em;
}
ol{
/* color:#447adb; */
margin: 2em;
}
ol li{
padding-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
/*.prompt{
display: None;
} */
ul li{
padding-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 0.2em;
}
a:link{
font-weight: bold;
color:#447adb;
}
a:visited{
font-weight: bold;
color: #1d3b84;
}
a:hover{
font-weight: bold;
color: #1d3b84;
}
a:focus{
font-weight: bold;
color:#447adb;
}
a:active{
font-weight: bold;
color:#447adb;
}
.rendered_html :link {
text-decoration: none;
}
.rendered_html :hover {
text-decoration: none;
}
.CodeMirror{
font-family: "Source Code Pro", source-code-pro,Consolas, monospace;
}
.rendered_html :visited {
text-decoration: none;
}
.rendered_html :focus {
text-decoration: none;
}
.rendered_html :active {
text-decoration: none;
}
.warning{
color: rgb( 240, 20, 20 )
}
hr {
color: #f3f3f3;
background-color: #f3f3f3;
height: 1px;
}
blockquote{
display:block;
background: #f3f3f3;
font-family: "Open sans",verdana,arial,sans-serif;
width:700px; /*altered from 610px*/
padding: 5px 5px 5px 5px; /*altered from 15px 15px 15px 15px*/
text-align:justify;
text-justify:inter-word;
}
blockquote p {
margin-bottom: 0;
line-height: 125%;
font-size: 100%;
text-align: center;
}
div#notebook_panel {/* added from theming w/ Hammond */
box-shadow: none;
-webkit-box-shadow: none;
border-top: none;
}
/* element.style {
} */
</style>
<script>
MathJax.Hub.Config({
TeX: {
extensions: ["AMSmath.js"]
},
tex2jax: {
inlineMath: [ ["$","$"], ["\\(","\\)"] ],
displayMath: [ ["$$","$$"], ["\\[","\\]"] ]
},
displayAlign: "center", // Change this to "center" to center equations.
"HTML-CSS": {
styles: {".MathJax_Display": {"margin": 4}}
}
});
</script>更新:
以下是作为HTML文件下载时由IPython/Jupyter生成的HTML文件的Dropbox链接.
也许这根本不是您想要的，但是如果您在整个代码周围放置一个 div 并将其边距设置为 auto 会怎么样？
或者，您可以在内容周围设置一个主 div：
width: 70vw;
然后，您必须为母版的两侧创建两个 div 并将每个设置为：
width: 15vw;
这样，div 就会占据整个宽度，并且无论在哪个屏幕上都始终保持比例。
| 归档时间： |
|
| 查看次数： |
868 次 |
| 最近记录： |