时间戳

首页 > 解决方案 > 带有图标的 CSS 警告 Div

javascript - 带有图标的 CSS 警告 Div

问题描述

我创建了一条警告消息或 div，通常会在我们结帐购买域名时显示。

但是当我创建自己的 CSS

锁定图标必须显示在文本的左侧，但显示为内联。

标签： javascriptphpjqueryhtmljsp

解决方案

添加float:left;到<i>

并提及大约高度以占用空间<i>。我已经给height: 100px;了这里。

.ftralert{
width:50%;
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}

.ftralert-warning i {
float:left;
margin-right:30px;
height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ftralert ftralert-warning">
<i class="glyphicon glyphicon-lock" style="font-size:24px;"></i>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>

希望这可以帮助 ：）

推荐阅读