使用图标将内容拟合到列中(Fitting content into a column with icon)

当我跟着另一个例子时，我发现它在我的情况下不起作用。 我使用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> 
  
 

When i followed another example I found that it doesn't work in my case. I use a Font Awesome icon and it somehow interferes with my CSS. 
 

What steps should I take to make the paragraph of text equally indented (in pixels) from the left border and the icon?
 

The proposed solution that doesn't work in this case:
 
#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> 
  
 

You can use a positive margin-left on the containing div element, and a negative margin-left on the child img to move it to the left of the text, like this:
 

 
 
  
  
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> 
  
 

使用图标将内容拟合到列中(Fitting content into a column with icon)

                
 当我跟着另一个例子时，我发现它在我的情况下不起作用。 我使用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> 
  
 

When i followed another example I found that it doesn't work in my case. I use a Font Awesome icon and it somehow interferes with my CSS. 
 

What steps should I take to make the paragraph of text equally indented (in pixels) from the left border and the icon?
 

The proposed solution that doesn't work in this case:
 
#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> 
  
 

You can use a positive margin-left on the containing div element, and a negative margin-left on the child img to move it to the left of the text, like this:
 

 
 
  
  
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>