字体真棒图标显示在文本框中
[英]Font Awesome Icon Appearing Under Text Box
问题描述
我的页面上有一个标题，并且有一个包含登录图片和您的网站余额的框。 但是我试图添加一个带有选项的下拉菜单，但由于某种原因，我的Font Awesome图标出现在文本框中。 基本上，我只是想了解为什么我的Font Awesome图标出现在我的文本框中。 有什么帮助吗？
JSFiddle： https ：//jsfiddle.net/nxt4Lzch/
<head>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/dropdown.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-box">
<div class="steam-info">
<img class="steam-avatar" src="<?=$steamprofile['avatar'];?>">
<div class="balance-box">
<i class="fa fa-database">
<span class="balance-amount">$201.50</span>
</i>
</div>
<div class="steam-dropdown">
<a href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><a href="#"><i class=""></i></a></li>
<li><a href="#"><i class="fa fa-area-chart"></i></a></li>
<li><a href="#"><i class="fa fa-life-ring"></i></a></li>
<li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
<li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
<li><a href="#"><i class="fa fa-users"></i></a></li>
</ul>
</div>
</body>
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
/* Header (Steam Section) */
.steam-box {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);
width:180px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-avatar {
width:30px;
height:30px;
margin-left:5px;
margin-top:3px;
border:2px solid rgb(28,28,28);
border-radius:10px;
}
.balance-box {
height:30px;
width:100px;
border-radius:10px;
position:absolute;
margin-top:5px;
margin-left:5px;
display:inline;
background:rgb(28,28,28);
}
.balance-box i {
color:rgb(255,255,255);
line-height:30px;
margin-left:10px;
}
.balance-amount {
color:rgb(255,255,255);
font-family:"Montserrat", sans-serif;
margin-right:10px;
}
.steam-dropdown i {
color:rgb(255,255,255);
font-size:8px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
#sidebar-menu ul {
margin:0px;
padding:0px;
margin-top:3px;
}
#sidebar-menu ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
#sidebar-menu ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
#sidebar-menu ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
#sidebar-menu ul li a:active {
font-size:25px;
}
1 个解决方案
解决方案1
1 已采纳 2017-01-11 04:16:29
发生这种情况是因为您的包含font-awesome icon steam-dropdown未display:inline; ，而是display:block; 默认。 因此，它需要换行。
现在，如果您添加display:inline; 到这个steam-dropdown ，它将在同一行中移动，但是由于您将position:absolute;设置为它，因此它会在.balance-box position:absolute; 到这个.balance-box 。 您必须删除它。
我建议删除position:absolute; 从.balance-box并在其父div（即.steam-info ）上使用flex。 通过在您的CSS中添加此代码：
.steam-info{
display:flex;
flex-direction:row;
align-items:center;
}
.steam-dropdown i {
margin-left:5px;
}
这样就解决了问题。 但我是否建议您替换left:1160px; right:20px; 在.steam-info的CSS中.steam-info因为在较小的屏幕中，它显示得太正确了。 我已将其包含在解决方案中，但如果您不希望这样做，可以将其删除。
这是工作中的小提琴 。
这是一个有效的代码段：
/* Default Stuff */ * { margin:0px; padding:0px; text-decoration:none; list-style:none; font-family:"Open Sans", sans-serif; } /* Loading Animation */ #loading-overlay { height:100%; width:100%; background:rgb(17,17,17); position:fixed; z-index:9999999999; left:0px; top:0px; } .loading-spinner { width:100px; height:100px; border:2px solid rgb(255,255,255); border-top:3px solid rgb(250,32,32); border-radius:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:auto; animation:loading-spin 1s infinite linear; } @keyframes loading-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* Website Header */ #header { background:rgb(28,28,28); width:100%; height:60px; position:absolute; box-shadow:0px 0px 8px 2px black; border-top:3px solid rgb(235,50,50); z-index:99999999; left:0px; top:0px; } /* Header (Steam Section) */ .steam-box { background:rgb(50,50,50); border-left:3px solid rgb(235,50,50);; width:180px; height:40px; position:absolute; z-index:999999999; top:10px; right:20px; } .steam-avatar { width:30px; height:30px; margin-left:5px; margin-top:3px; border:2px solid rgb(28,28,28); border-radius:10px; } .balance-box { height:30px; width:100px; border-radius:10px; //position:absolute; margin-top:5px; margin-left:5px; display:inline; background:rgb(28,28,28); } .balance-box i { color:rgb(255,255,255); line-height:30px; margin-left:10px; } .balance-amount { color:rgb(255,255,255); font-family:"Montserrat", sans-serif; margin-right:10px; } .steam-dropdown i { color:rgb(255,255,255); font-size:8px; } /* Sidebar Menu */ #sidebar-menu { background:rgb(41,41,41); width:60px; height:100%; position:absolute; text-align:center; line-height:60px; box-shadow:4px 4px 8px black; left:0px; top:0px; } #sidebar-menu ul { margin:0px; padding:0px; margin-top:3px; } #sidebar-menu ul li { list-style:none; height:60px; border-bottom:2px solid rgb(17,17,17); } #sidebar-menu ul li a { color:rgb(255,255,255); font-size:30px; display:block; height:100% width:100%; } #sidebar-menu ul li a:hover { background:rgb(255,255,255); color:rgb(41,41,41); } #sidebar-menu ul li a:active { font-size:25px; } .steam-info{ display:flex; flex-direction:row; align-items:center; } .steam-dropdown{ flex-grow:1; } .steam-dropdown a{ display:block; width:100%; margin:0; padding:0; height:100%; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!--Loading Animation <div id="loading-overlay"> <div class="loading-spinner"></div> </div>--> <!--Website Header--> <div id="header"> <div class="steam-box"> <? if(isset($_SESSION['steamid'])) {?> <div class="steam-info"> <img class="steam-avatar" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"> <div class="balance-box"> <i class="fa fa-database"> <span class="balance-amount">$201.50</span> </i> </div> <div class="steam-dropdown"> <a href="#"><i class="fa fa-chevron-down"></i></a> </div> </div> <? } else {?> <? } ?> </div> </div> <!--Website Sidebar--> <div id="sidebar-menu"> <ul> <li><a href="#"><i class=""></i></a></li> <li><a href="#"><i class="fa fa-area-chart"></i></a></li> <li><a href="#"><i class="fa fa-life-ring"></i></a></li> <li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li> <li><a href="#"><i class="fa fa-shopping-basket"></i></a></li> <li><a href="#"><i class="fa fa-users"></i></a></li> </ul> </div>
字体真棒图标未出现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.