[英]Inline Blocks and Text Wrapping with CSS
I want to display a checkbox, followed by some text that wraps around below itself. 我想显示一个复选框,然后是一些包含在自身下方的文本。 The HTML without any CSS looks as follows:
没有任何CSS的HTML如下所示:
<input type="checkbox" checked="checked" />
<div>Long text description here</div>
I want it to display similar to: 我希望它显示类似于:
X Long Text
Description
Here
It currently wraps around like this 它目前像这样包装
X Long Text
Description Here
This is easy to do with tables, but I need it to be in CSS for other reasons. 这对表很容易,但出于其他原因我需要它在CSS中。 I thought a combination of display: inline-block / float: right / clear / spans instead of DIVs would work, but I've had no luck so far.
我认为显示的组合:inline-block / float:right / clear / span而不是DIV会起作用,但到目前为止我没有运气。
Wrap the checkbox and label in a container div (or li - i do forms with lists often) and apply 将复选框和标签包装在容器div(或li - 我经常使用列表表单)并应用
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">I agree with checkbox</label>
</div>
.checkbox input {
float:left;
display:block;
margin:3px 3px 0 0;
padding:0;
width:13px;
height:13px;
}
.checkbox label {
float:left;
display:block;
width:auto;
}
Try this: 尝试这个:
input { float: left; }
div { margin-left: 40px; }
Tune the margin-left
to how much space you want. 调整
margin-left
你想要多少空间。 The float: left
on the checkbox basically takes it out of the block layout so it doesn't push down the text. float: left
的复选框基本上将其从块布局中取出,因此它不会向下推文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.