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/

Answer 2

inline-block是您需要的display。

Answer 3

您的浏览器可能对空元素持怀疑态度。尝试将 添加到<div>。

Answer 4

<{1}}元素中不允许使用<<div> {不允许其中的任何块级元素。）

<强> See this example

在此示例中，我使用了<p>并将display: inline-block;元素更改为<p>。

Answer 5

有很多方法可以做到，其中一种方法是this

Answer 6

只是为了确保 - 您是否将.checkbox选择器放在实际HTML中的<style>标记内？

<style type="text/css">
    .checkbox { border: 1px solid black; width: 10px; height: 10px; }
</style>

Answer 7

1）摆脱<p>元素

2）将float: left添加到.checkbox样式

3）将 或div后的padding: right添加到div块以使其看起来更好

4）在样式块中添加li { list-style-type: none; }

5）以vertical-align样式使用.checkbox游戏，直到您满意为止

HTML＆amp; CSS：创建一个复选框而不使用'复选框'

7 个答案: