Html 防止文本在图标下换行

我正在尝试创建一个项目列表，每个项目都需要在左侧有一个图标。对于长名称项，文本将在图标下换行。如何防止这种情况发生

在下图中，您可以看到“已创建”文本位于文件图标下：

我正在使用引导，以下是我创建每个项目的方式：

var renderActivity = function(a) {
  var html = "";
  html += "<a title='" + a.title + "' href='" + a.path +"' class='list-group-item clearfix" + a.type + "'>";
  html +=   "<span class='glyphicon glyphicon-"+a.icon+" pull-left fa-3x'></span>";
  html +=   "<div>";
  html +=       "<h3 class='list-group-item-heading'>" + a.type + ": " + a.title + "</h3>";
  html +=       "Created: " + a.created
  html +=   "</div>";
  html += "</a>";

  return html
}

var renderActivity=函数（a）{
var html=“”；
html+=“”；
返回html
}

您必须

浮动：在
p
标记后面的
div
左侧。目前的haping是一个简单的文本如何围绕它。就像报纸上的图像左右浮动一样，文本从侧面移动到图像，然后在文本延伸到图像下方时从图像下方通过

您还需要做的是
p
标记后面的
div
。但要使它浮动，你也必须给它特定的宽度。以下代码应该可以解决您的问题：


a{
显示：块；
浮动：左；
最大宽度：400px；
边框：1px固体青色；
填充：2px；
}
a>p{
浮动：左；
边框：1px点绿色；
右边距：2px；
}
a>分区{
浮动：左；
最大宽度：350px；
边框：1px点红色；
}
您必须
浮动：在
p
标记后面的
div
左侧。目前的haping是一个简单的文本如何围绕它。就像报纸上的图像左右浮动一样，文本从侧面移动到图像，然后在文本延伸到图像下方时从图像下方通过

您还需要做的是
p
标记后面的
div
。但要使它浮动，你也必须给它特定的宽度。以下代码应该可以解决您的问题：


a{
显示：块；
浮动：左；
最大宽度：400px；
边框：1px固体青色；
填充：2px；
}
a>p{
浮动：左；
边框：1px点绿色；
右边距：2px；
}
a>分区{
浮动：左；
最大宽度：350px；
边框：1px点红色；
}
有很多解决方案。单向：


.txt部分{
浮动：左；
填充：0 10px；
显示：内联块；
}
.字形图标{
浮动：左；
字体大小：30px；
显示：内联块；
}
有很多解决方案。单向：


.txt部分{
浮动：左；
填充：0 10px；
显示：内联块；
}
.字形图标{
浮动：左；
字体大小：30px；
显示：内联块；
}

为列表中的每一行制作一个表格怎么样？每一行都有一个1行2列的表来强制分隔两个元素？或者你可以在你的图标元素中添加底部填充，这样你的另一个元素就不能在它下面换行了？每一行都有一个1行2列的表来强制分隔两个元素？或者你可以在你的图标元素中添加底部填充，这样你的其他元素就不能在它下面包装了。工作得很好！谢谢你。我最后使用了你建议的媒体课程。工作得很好！非常感谢。