代码之家 › 专栏 › 技术社区 › Clinton Pierce

CSS需要内联元素出现在{display:block;}元素旁边

css html

Clinton Pierce · 技术社区 · 16 年前

我试图在另一个元素旁边引入一个复选框。问题是 a 元素已被CSS设置为一个“块”,以便以正确的高度和宽度显示。作为一个积木,我不能简单地把另一个元素放在它旁边,然后希望它出现在那里——它出现在它的正下方。

<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>

所以我想要的是复选框立即出现在元素的右侧,但不必完全弄乱按钮的样式。使用按钮的(已知)大小对复选框进行绝对定位似乎是错误和肮脏的。

建议?

6 回复 | 直到 16 年前

Aaron 16 年前

<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>

David Hedlund 16 年前

如果必须将锚定保持为块元素,请设置 float: left 去吧。别忘了加上

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

在复选框后面。

Zoidberg 16 年前

再添加两个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>

我们应该这样做

Chris 16 年前

你能用你现有的权限做这样的事情吗?

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

Jeroen 13 年前

只要申请一个 float: left a

-1

Evan Kroske 16 年前

在保留按钮的块样式的同时,获取按钮旁边复选框的最简单方法是设置按钮的 display inline-block . 令人惊讶的是,使用 display: inline-block 在这种情况下,将在所有现代浏览器和IE6及以上版本中工作。是一种鲜为人知但非常有用的财产。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前