当我按照另一个示例进行操作时,我发现它在我的情况下无法正常工作。我使用了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>