出现在文本框下的字体真棒图标

时间：2017-01-11 03:22:58

标签： html css

我的页面上有一个标题，并且有一个包含登录图片和您的网站余额的框。但我正在尝试添加一个带有选项的下拉菜单，但是或者某些原因我的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 个答案:

答案 0 :(得分：1)

这种情况正在发生，因为包含steam-dropdown的{​​{1}}不是font-awesome icon，而是默认为display:inline;。因此需要换行。

现在，如果您向此display:block;添加display:inline;，那么它会在同一行中移动，但它会在steam-dropdown下，因为您要将.balance-box设置为此position:absolute; 1}}。你必须删除它。

我建议从.balance-box删除position:absolute;并在其父div上使用flex（.balance-box）。在你的css中添加这个：

.steam-info

这解决了问题。但是我可以建议在.steam-info{ display:flex; flex-direction:row; align-items:center; } .steam-dropdown i { margin-left:5px; } 的css中用left:1160px;替换right:20px;，因为在较小的屏幕中它过于正确。我已将此包含在我的解决方案中，但如果您不想这样，可以将其删除。

这是一个有效的fiddle。

这是一个有效的代码片段：

.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;
}

相关问题
最新问题