HTML & CSS : create a checkbox without using 'checkbox'

Question

这是代码(是的，我使用的是基本的 reset.css):

.checkbox { border: 1px solid black; width: 10px; height: 10px; }

<ul>
    <li>
        <p><div class="checkbox"></div>I will!</p>
    </li>
    <li>
        <p><div class="checkbox"></div>I won't!</p>
    </li>
</ul>

你可以看到我正在尝试做什么。本质上创建一个复选框。我不使用复选框标签的原因是因为我必须将这个东西导出为 PDF 以便它可以被打印并且 hamfisted bogots 可以将他们的 X 标记拖过该框。如果我使用复选框标签，它太小了。如果我使用图像，PDF 不会正确排列。

所以。我需要 CSS 框按预期排列。我错过了什么？我试过将 div 更改为 display: inline; 但它消失了! inline-block没用。

我疯狂地尝试搜索这个，但无济于事，所以如果它出现在其他地方，我们深表歉意。

WR!

Answer 1

.checkbox { 
    border: 1px solid black; 
    width: .65em; 
    height: .65em; 
    display: inline-block;
    margin-right: 4px;
}

在这里查看它的工作情况:http://jsfiddle.net/ZeaLM/