将内容放入带有图标的列中
Fitting content into a column with icon
当我关注另一个 example 时,我发现它对我的情况不起作用。我使用了一个 Font Awesome 图标,它以某种方式干扰了我的 CSS。
我应该采取什么步骤使文本段落从左边框和图标缩进(以像素为单位)?
在这种情况下不起作用的建议解决方案:
#left {
float:left;
width:7px;
}
#right {
width: 100%;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
您可以在包含的 div
元素上使用正 margin-left
,在子 img
上使用负 margin-left
将其移动到文本的左侧,像这样:
div {
width: 200px;
text-align: justify;
margin-left: 20px;
}
div .fa {
float: left;
width: 10px;
margin: 3px 0 0 -15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div>
<i class="fa fa-caret-up"></i>
A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>
有几种方法可以实现这一点,Rory 已经向您展示了一种。另一种方法是将 relative
的 position property
值添加到 main(父元素),如下所示,然后将 absolute
的 position property
值添加到 .fa。这样你就可以使用 left
和 negative value
来根据需要定位它。
注意:要让文字环绕图标,只需将 .fa
浮动到左侧,然后使用 margins
调整图标之间的间距和文本。
.main {
width: 200px;
margin-left: 50px;
position: relative;
}
.fa {
position: absolute;
left: -25px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
当我关注另一个 example 时,我发现它对我的情况不起作用。我使用了一个 Font Awesome 图标,它以某种方式干扰了我的 CSS。
我应该采取什么步骤使文本段落从左边框和图标缩进(以像素为单位)?
在这种情况下不起作用的建议解决方案:
#left {
float:left;
width:7px;
}
#right {
width: 100%;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>
您可以在包含的 div
元素上使用正 margin-left
,在子 img
上使用负 margin-left
将其移动到文本的左侧,像这样:
div {
width: 200px;
text-align: justify;
margin-left: 20px;
}
div .fa {
float: left;
width: 10px;
margin: 3px 0 0 -15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div>
<i class="fa fa-caret-up"></i>
A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>
有几种方法可以实现这一点,Rory 已经向您展示了一种。另一种方法是将 relative
的 position property
值添加到 main(父元素),如下所示,然后将 absolute
的 position property
值添加到 .fa。这样你就可以使用 left
和 negative value
来根据需要定位它。
注意:要让文字环绕图标,只需将 .fa
浮动到左侧,然后使用 margins
调整图标之间的间距和文本。
.main {
width: 200px;
margin-left: 50px;
position: relative;
}
.fa {
position: absolute;
left: -25px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>