Question

我很难在图标旁边获取一些文本。这是我当前的代码：

<html>
<head>                                                                                                                                      <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">                        
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </head>                                                                                                                        
 <body>

<i class="pull-left glyphicon glyphicon-envelope">                                                         
 <h3>some email address</h3>                                                                                                      </i> 

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|@
    heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>                                                                      
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|@
    WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>                                                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|@
    4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    </body>
</html>

结果can be seen here here

您会看到电子邮件地址位于下一行而不是信封图标旁边。我如何并排？

谢谢

jsfiddle：http://jsfiddle.net/1dov5ea4/2/

Answer 1

我尝试过这个：

<h3>
    <i class="pull-left glyphicon glyphicon-envelope"></i>                                                       
    some email address
</h3>

将<i>标记放在<h3>标记内

Answer 2

这应该为您工作。您需要提防，因为关闭的li标签不在屏幕上。

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
   href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script>
    <script 
      src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> 
    </script>
  </head>
  <body>
    <h3> <i class="pull-left glyphicon glyphicon-envelope"></i>some email address</h3>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|@
heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|@
WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|@
4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> 
  </script>
</body>

Answer 3

尝试像这样http://jsfiddle.net/1dov5ea4/30/在<i>内添加<h3>标签

Answer 4

<h3>是一个块元素，因此会自动放置在自己的行上...

使用<i>而不是<h3>来修复它，并使用其样式来增大字体大小

或将整个内容包装在没有h3的div中

HTML-如何在图标旁边显示文本？

4 个答案: