个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在电子邮件的两边添加填充，以便它在整个邮件程序中保持一致，但由于某种原因它似乎是一边倒的。我想要每行两侧各有一个 40 像素的间距，但似乎无法实现。
HTML
<link rel="stylesheet" href="ink.css"> <!-- For testing only -->
<style type="text/css">
/* Ink styles go here in production */
</style>
<style type="text/css">
.email-container {
border: 1px solid #cccccc;
padding: 0 40px !important;
}
.sub-columns {
padding: 15px !important;
}
.row-highlight {
background-color: #f5f5f5 !important;
}
.wrapper {
padding-top: 0 !important;
}
.bold {
font-weight: bold;
}
.product {
padding-left: 30px !important;
}
.bold-row td {
background-color: #ffffff;
font-weight: bold;
}
.row-secondary {
background-color: #ffffff;
}
.align-right {
text-align: right;
}
.invoice a,
.invoice a:visited,
.social a,
.social a:visited {
color: #c40162 !important;
font-size: 13px !important;
text-decoration: underline !important;
}
.nav,
.nav a {
color: #757575 !important;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
text-align: right;
vertical-align: middle;
text-transform: uppercase;
}
.logo {
padding: 0 !important;
}
.social {
background-color: #e8e8e8!important;
color: #4d4d4d !important;
padding-top: 20px !important;
}
.title {
background-color: #ffffff;
border-bottom: 2px solid #f5f5f5;
border-left: 0 !important;
border-right: 0 !important;
border-top: 2px solid #f5f5f5;
font-size: 28px;
font-weight: bold;
padding: 30px 0 !important;
}
.footer {
background-color: #ffffff;
border-left: 0 !important;
border-right: 0 !important;
border-top: 2px solid #f5f5f5;
border-bottom: 0;
color: #171717;
font-size: 12px;
font-weight: bold;
padding: 20px 0 !important;
}
.footer a {
color: #c40162 !important;
text-decoration: underline;
}
.content {
background-color: #ffffff;
color: #171717;
line-height: 20px;
}
.content-title {
background-color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 15px !important;
}
.table-border-bottom {
border-bottom: 1px solid #e8e8e8;
}
.table-border-top {
border-top: 1px solid #e8e8e8;
}
.no-bottom-padding {
padding-bottom: 0 !important;
}
.spacer {
padding: 20px 0 0 0 !important;
}
</style>
</head>
<body style="background:#ddd">
<table class="body" style="background:#ddd">
<tr>
<td class="center" align="center" valign="top" >
<center>
<table class="email-container" style="background:#fff">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad spacer"></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns nav">
<tr>
<!-- Logo -->
<td class="five sub-columns logo"><img height="50" width="50" src="http://placehold.it/50x50&text=LCN"></td>
<!-- Logo End -->
<!-- Nav Items-->
<td class="two sub-columns nav"><a href="#">Support</a></td>
<td class="two sub-columns nav"><a href="#">Contact</a></td>
<td class="two sub-columns nav last"><a href="#">Login</a></td>
<!-- Nav items End -->
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad spacer">
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="eleven columns">
<tr>
<td class="center text-pad title">Thank you for your order</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad">
<h5>Hi %%name%%,</h5>
<p class="lead">Thank you for your order.</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="text-pad">
<p>© 2015</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- container end below -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
CSS 标准 Zurb CSS
最佳答案
试试这个:https://jsfiddle.net/L5nvc6rn/2/
如果您在包含的 TD 上放置填充，那么它将为您提供您可能需要的填充，例如:
<td style="padding:40px;">
关于css - 使用 Zurb Ink 在容器上添加填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30216562/
25
4
0
Ink Sapo UI Toolkit 中的顶部栏 ID 是什么？它在文档中无处可寻。它只是将菜单居中吗？它实际上做了什么？有人知道吗？ 最佳答案 topbar 没有记录，但它的作用很像 Boots
我已经根据 Microsoft 的简化墨迹书写示例在我的应用程序中实现了墨迹书写代码:http://code.msdn.microsoft.com/windowsapps/Input-simplifi
我是 C 中指针的新手。我知道基本概念。在下面的代码中，为什么要打印“墨水”作为输出？ #include main() { static char *s[]={"black","white",
我正在阅读 Tufte 的 data-ink ratio我想知道是否可以测量绘图使用的“墨水”量？ 如果在 R 中不可能使用其他工具，例如 GIMP 或 imagemagick？ 最佳答案 我建议使用
我有两列，其中一列内容更多 = 更大，但我希望黑色的列与右边的高度相同。 有一种解决方法，即在表格宽度高度 100% 周围添加 div 并显示:inline-block，但这是一个丑陋的 hack。
我正在尝试为每周产品交易创建一个非常基本的时事通讯电子邮件。我正在使用 Zurb INK。我面临的问题是，自定义类之一的边框属性没有被实现。 CodePen 链接是 http://codepen.io
我有很多签名要比较(全部采用 ISF - 墨水序列化格式)。 如何比较这些签名？ 最佳答案 好吧，我最终使用了一个完美的想法，并使用速度、时间、距离分析了签名，并创建了一个有效的算法。 关于c# -
我想使用 Seshat — 手写数学表达式解析器 — 适用于我正在从事的项目，但我在理解如何为程序提供正确的输入(InkML 或 SCG Ink 文件)时遇到了一些麻烦。 我仔细查看了一个存在的在线示
我正在处理一封电子邮件，其中一些文本下方有一个按钮，右侧是产品图片。 代码:http://jsfiddle.net/uw4Xz/
我正在尝试在电子邮件的两边添加填充，以便它在整个邮件程序中保持一致，但由于某种原因它似乎是一边倒的。我想要每行两侧各有一个 40 像素的间距，但似乎无法实现。 HTML
我正在尝试使用 the Ink framework 制作标题(CSS/JS) 已修复，因此滚动时它不会在页面上移动，我似乎无法做到这一点。 HTML:
我正在使用 Ink 尝试创建来自电子商务商店的订单确认电子邮件。如果我有一个显示元素信息或我布局的任何类型数据的表格，则在将大小时调整为小时，最后一列会被压缩为一个字符宽度。附上 6 列单元格中的示例
使用 Mircosoft.Ink，当我有一个 RecognizerContext rec 时，如何分隔不同的行？当我调用 rec.Recognize 时，我需要获取每行编写的文本，而不是所有内容。 最
当我查看 Ink 和 GestureDetector 的示例时，我发现它们提供了类似的效果。 我可以说 Ink 只是 GestureDetector 的子项，它只检测 onTap() 吗？ 最佳答案
我尝试让 HP Officejet Pro X476 仅使用黑色墨水在文档中打印带有颜色的纯文本。 在 LibreOffice 中这是可能的，我只需单击“打印黑色文本”，这是打印对话框(颜色部分)中的
是否可以禁用 md-ink-ripple在父元素上，当我单击像 这样的子元素时？ http://codepen.io/anon/pen/QKwkOB Test
我希望我的图像在点击时具有墨水池效果，以前我可以使用 Ink.image 小部件来实现，然后像这样提供 NetworkImage() 作为图像属性: Ink.image( fit: BoxFi
我希望我的图像在点击时具有墨水池效果，以前我可以使用 Ink.image 小部件来实现，然后像这样提供 NetworkImage() 作为图像属性: Ink.image( fit: BoxFi
当我去https://packagist.org/packages/submit提交我的包裹。 显示此错误， The package name apzentral/ink is invalid, it
在创建 HTML 电子邮件时，我使用了 Zurb Ink 框架。 我有一个面板，我想在面板内显示几条水平线。例如: Panel: [assigned] 12/12/2013 12:14:00 Rebo
我是一名优秀的程序员,十分优秀！