HTML和CSS:创建一个复选框而不使用"复选框"

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以便它可以打印,并且汉堡包可以通过框拖动他们的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/