Question

我正在创建Bootstrap弹出窗口以显示一些信息。将有一个或多个部件，每个部件包含一个图标和一些文本。如果这有任何改变，我也正在使用树枝。

HTML

<span class="fa fa-user instructor-contact-info-header"></span>    
<div class="contact-info-container">
<p class="instructor-contact-info-header"> 
    {{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>                                        
<p class="instructor-contact-info-data">Put other stuff here</p>

我有CSS

.instructor-contact-info-header {
  display: inline-block;
  color: #005993;
  margin: 0;
}

外观：

@ 
text text text text text text
text text text text text text
text text text text text text

我想要得到的是什么

@ text text text text text text
  text text text text text text
  text text text text text text

@ text text text text text text
  text text text text text text
  text text text text text text

编辑：实施解决方案后。具有多个人的联系信息的弹出窗口如下所示：

  @ text text text text text text    @
    text text text text text text
    text text text text text text
@ text text text text text text
  text text text text text text
  text text text text text text

Answer 1

您在span（块元素）旁边有一个div（内联元素）。因此div是换行符。只需使div内联块也可以解决：

.instructor-contact-info-header {
  display: inline-block;
  color: #005993;
  margin: 0;
}
.contact-info-container {
  display: inline-block;
  vertical-align: top;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>    
<div class="contact-info-container">
<p class="instructor-contact-info-header"> 
    {{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>                                        
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>    
<div class="contact-info-container">
<p class="instructor-contact-info-header"> 
    {{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>                                        
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>    
<div class="contact-info-container">
<p class="instructor-contact-info-header"> 
    {{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>                                        
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>

更新：

只需将整个内容包装在div中，这样它就是块级。

将div与图标旁边的文本对齐

1 个答案: