在创建 HTML 电子邮件时,我使用了 Zurb Ink 框架。
我有一个面板,我想在面板内显示几条水平线。例如:
Panel:
[assigned] 12/12/2013 12:14:00 Reboot Server
[unassigned] 12/12/2013 15:00:00 Shutdown Server
有分配/未分配按钮和后面的文本。
在这段代码中,我在面板内成功创建了面板和按钮。但是,我无法让按钮只占用两列。我怎样才能让按钮只包含 2 列,然后在按钮后面有文本?
<table class="row callout">
<tr>
<td>
<table class="twelve columns">
<tr>
<td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
<table class="two columns">
<table class="tiny-button small radius alert">
<tr>
<td>
unassigned
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
最佳答案
我相信子栏正是您要寻找的。来自 Zurb 文档:
While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.
标记
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="four sub-columns">
<table class="button">
<tr>
<td> <a href="#">Assigned</a>
</td>
</tr>
</table>
</td>
<td class="eight sub-columns last">2/12/2013 12:14:00 Reboot Server</td>
<td class="expander"></td>
</tr>
<tr>
<td class="four sub-columns">
<table class="button">
<tr>
<td> <a href="#">Unassigned</a>
</td>
</tr>
</table>
</td>
<td class="eight sub-columns last">12/12/2013 15:00:00 Shutdown Server</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
关于html - Zurb Ink 按钮不符合面板中的 2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22100964/