我想在线排版考试文本。经过高低搜索,这是我能想出的唯一解决方案:
<table>
<tr><td colspan="3">Question 1</td><td>[24]</td></tr>
<tr><td>1.1</td><td colspan="2">Solve for $x$</td></tr>
<tr><td></td><td>1.1.1</td><td>$(3x+7)(x^2+2)=0$</td><td>(3)</td></tr>
<tr><td></td><td>1.1.2</td><td>$\sqrt{2-x} - x = 4$</td><td>(5)</td></tr>
<tr><td>1.2</td><td colspan="2">The equations of two parabolas are $y = x^2 +
x + c$ and $y = 1 - cx - x^2$, where $c$ is a real number.</td></tr>
<tr><td></td><td>1.2.1</td><td>Prove that these parabolas must intersect
for all real values of $c$.</td><td>(6)</td></tr>
</table>
尝试让每个问题都排成一行。我看过使用 HTML 列表,但在插入图表等时它们会出现问题。有什么我想念的吗?有没有更快的方法来输入这个?我的问题仅在于格式化,在寻找答案的同时找出了 CSS 中的计数器。
非常感谢,来自绝望的老师和菜鸟。
最佳答案
如果您的问题是在顶部垂直对齐问题的编号和分数,那么最直接的答案是添加 css 样式 vertical-align:top;
。
所以你的 css 应该是这样的:
td {
vertical-align:top;
}
查看此 http://jsfiddle.net/dyPR9/
对于更高级的版本,您不应该使用表格来格式化您的输出。在这种情况下,您有一个订单列表,因此,该表将转换为 ol
和 li
元素,并将分数放入 div
元素中:
<ol>
<li class="mainquestion">Question 1
<div class="score">[24]</div>
</li>
<ol>
<li>Solve for $x$</li>
<ol>
<li>$(3x+7)(x^2+2)=0$
<div class="score">(3)</div>
</li>
<li>$\sqrt{2-x} - x = 4$
<div class="score">(5)</div>
</li>
</ol>
</ol>
</ol>
并且 css 应该处理演示文稿:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".")" "; counter-increment: item }
ol:first-child { padding: 0; }
li.mainquestion { list-style: none; }
li.mainquestion+ol { padding: 0; }
li.mainquestion:before { content: ""; counter-increment: item }
div.score { float: right; }
请参阅 http://jsfiddle.net/q2YCV/ 中的示例
关于html - 在 CSS/HTML 中格式化考试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21052590/