html - 复选框将不正常

Question

<div style="display:inline;  margin-left:30px;  ">  
                 <span class="checktext"><?php echo $newspec->spec;?><span>
                 <input class="postptext" style=" display:inline; float:right;" type="checkbox" id="<?php echo $newspec->ID;?>" value="<?php echo $newspec->spec;?>">
</div>

<div style="display:inline;  margin-left:30px;  ">  
                 <span class="checktext"><?php echo $newspec->spec;?><span>
                 <input class="postptext" style=" display:inline; float:right;" type="checkbox" id="<?php echo $newspec->ID;?>" value="<?php echo $newspec->spec;?>">
</div>

<div style="display:inline;  margin-left:30px;  ">  
                 <span class="checktext"><?php echo $newspec->spec;?><span>
                 <input class="postptext" style=" display:inline; float:right;" type="checkbox" id="<?php echo $newspec->ID;?>" value="<?php echo $newspec->spec;?>">
</div>

这是CSS:

.postptext
{
   float:right;
}

这是我的布局。这是我看到的:

如您所见，复选框显然是向右浮动的，但它们却坚持表现得很奇怪。我无法设置 margin-left、margin-right 等等。他们只会呆在那里。我将 margin-left 30px 放在整个 div 上，但只有 span 应用了边距设置。我很困惑。我知道其他一些 css 定义了复选框设置。但是不会 float:Right 足以覆盖它吗？如果不是，我应该怎么做才能让他们完全忽略模板定义的css？

Answer 1

“但他们坚持表现得很奇怪”有点含糊。在不知道它有什么奇怪的情况下，很难说如何让它不奇怪，因为那也可能很奇怪。

每当我复制并测试您的代码(同时用一些简单的 tekst 替换 php 代码)时，我都会得到不同的结果，其中复选框会向右浮动(正如我所想的那样)。

但是，我对奇怪行为的第一个猜测是因为 div 是内嵌的。因为这些是内联的，所以 float 的复选框将相对于主体 float 。至少，他们在我的案例中复制了您的代码。

例如，制作 div 内联 block 具有一些效果，其中复选框相对于 div 是 float 的。

几点说明:

• 输入元素默认已经是内联的。向它们添加“显示:内联”似乎没有什么意义，除非有其他 css 影响了显示，在这种情况下您遗漏了一些重要的重要信息。
• 在类 postptext 已经提供 float: right 的情况下向您的复选框添加“float: right”对我来说似乎有点多余。