HTML-如何在圖標旁邊顯示文本？
[英]HTML - How can I get my text next to my icon?
問題描述
我很難在圖標旁邊得到一些文本。 這是我當前的代碼：
<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>
結果可以在這里看到
如您所見，電子郵件地址位於下一行而不是信封圖標旁邊。 我如何並排放置？
謝謝
jsfiddle： http : //jsfiddle.net/1dov5ea4/2/
4 個解決方案
解決方案1
7 已采納 2018-08-15 11:53:06
我嘗試了這個：
<h3>
<i class="pull-left glyphicon glyphicon-envelope"></i>
some email address
</h3>
將<i>標記放在<h3>標記內
解決方案2
1 2018-08-15 12:08:22
這應該為您工作。 您需要當心，因為您關閉的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>
解決方案3
0 2018-08-15 12:13:42
嘗試在<h3>內添加<i>標簽，例如http://jsfiddle.net/1dov5ea4/30/
解決方案4
-1 2018-08-15 11:54:44
<h3>是一個塊元素，因此會自動放在自己的行上...
要修復此問題，請使用<i>而不是<h3>並使用它的樣式來增大字體大小
或將整個內容包裝在沒有h3的div中
添加圖標后，如何將圖標移到下一行？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.