HTML 和CSS：创建一个复选框而不使用“checkbox”
这是代码（是的，我正在使用基本的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没用。
我疯狂地试图搜索这个，但无济于事，所以如果这出现在其他地方，我深表歉意。
写！
here's the code (and, yes, i'm using a basic 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>
you can see what i'm trying to do. essentially create a checkbox. the reason i'm NOT using a checkbox tag is because i have to export this thing to PDF so that it can be printed and hamfisted bogots can drag their X mark through the box. if i use the checkbox tag, it's too small. if i use and image, PDF doesn't line up right.
so. i need the CSS box to line up as expected. what am i missing? i've tried changing the div to display: inline; but it freakin' disappears! inline-block useless.
i tried like mad to search this one out, but to no avail, so if this showed up somewhere else, apologies.
WR!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
在这里查看它的工作原理：http://jsfiddle.net/ZeaLM/
See it working here: http://jsfiddle.net/ZeaLM/
inline-block是您需要的display。inline-blockis thedisplayyou need for this.您的浏览器可能对空元素很挑剔。尝试将
中。Your browser might be persnickety about empty elements. Try adding a
<div>.不允许出现在元素内部（不允许在其中包含任何块级元素）。查看此示例
在此示例中，我使用了
display: inline -block;并将元素更改为<div>is not allowed inside of<p>elements (which doesn't allow any block-level elements inside of it).See this example
In this example, I've used
display: inline-block;and changed the<p>element into a<div>.有很多方法可以做到这一点，其中之一就是这个
There's many ways to do it, one of which is this
只是为了确保 - 您是否将 .checkbox 选择器放入实际 HTML 中的
Just to make sure - did you put the .checkbox selector inside a
<style>tag in the actual HTML?1) 删除
元素2) 将
float: left添加到.checkbox样式3) 添加
& ;nbsp;在div后面或div块的padding: right使其看起来更好4) 添加
li { 列表样式类型： 没有任何; }在你的样式块中5) 在你的
.checkbox样式中尝试使用vertical-align直到你满意为止1) Get rid of the
<p>elements2) Add
float: leftto your.checkboxstyle3) Add
divor apadding: rightto thedivblock to make it look better4) Add
li { list-style-type: none; }in your style block5) Play around with
vertical-alignin your.checkboxstyle until you're happy