Question

我正在尝试在另一个元素旁边引入一个复选框。问题是CSS已将a元素设为“块”，以使其以正确的高度和宽度显示。作为一个块，我不能简单地在它旁边添加另一个元素并希望它出现在那里 - 它显示在它下面。

自包含样本如下所示。

<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
        background-color: #B35905;
        color: #E6D389;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        display: block;
        border: none;
        cursor: pointer;
}
.normal{
    line-height: 20px;
    font-size: 12px;
    height: 20px;
    width: 125px;
    padding: 0px;
    margin: 0px;
}
</style>
</head>
<body>

<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>

所以我正在寻找的是立即出现在元素右侧的复选框，但无需完全弄清按钮的样式。使用按钮的（已知）大小绝对定位复选框似乎是错误和脏的。

建议？

Answer 1

如果必须将锚点保留为块元素，请将float: left设置为它。别忘了添加

<div style="clear: both;"></div>

复选框后

。

Answer 2

再添加两个css类

.floatingButton{
    float:left;
}
.aCheckbox {
    xclear:left;
}

然后

<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
        <br>
        <a class="btn normal">Push Me Too</a>

应该做的伎俩

Answer 3

<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>

Answer 4

您可以使用您拥有的访问权限执行此类操作吗？

<div style="width: 150px;">
  <input type="checkbox" style="float: right;"> 
  <a class="btn normal">Push Me</a>
</div>

Answer 5

只需将float: left应用于第一个a代码。

Answer 6

在保留按钮的块样式的同时，获取按钮旁边的复选框的最简单方法是将按钮的display属性设置为inline-block。令人惊讶的是，在这种情况下使用display: inline-block将适用于所有现代浏览器和IE 6及更高版本。 inline-block是一个鲜为人知但非常有用的财产。

CSS需要内联元素出现在{display：block;元素

6 个答案: