如何对齐具有类似边距的图标和字体

时间：2017-04-27 19:54:21

标签： html css

我试图让我的图标和文字具有相同的填充或边距。如果您运行代码，您将看到一个类别靠近图标而另一个类别很远。我希望有一致性。我尝试了很多东西，但它没有反映任何东西

＆＃13;
＆＃13; 
.category_nav
{
	height: 40px;
	margin-top: 38px;
}

.category_nav_ul
{
	list-style-type: none;
	padding:0;
}

.category_nav_ul > li
{
	display: inline-block;
}

#category_nav_ul_category
{
	width: 380px;
	cursor: pointer;
}

#category_nav_div
{
	margin-top: 5px;
	width: 380px;
	position: absolute;
	background-color: white;
	padding-bottom: 10px;
}

#categories_content
{
	margin-top: 10px; 
}


.category_nav_div .content:hover
{
}

.categories
{
	list-style: none;
}

.category
{
	padding-top: 6px;
	padding-bottom: 6px;
	margin-bottom: 1px;
	border: 0;
	border-radius: 0;
}

.category:hover
{
	border: 2px;
	background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
  	background-color: white;
  	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}

.category_icon
{
	width: 20px !important;
	padding-right: 5px;
	background-color: red;
}
.category_content
{
	margin-left: 15px !important;
}

.light-border
{
	border: 1px solid #e8e8e8;
	border-top: none;
}

h2.flash_title
{
	color: rgb(120, 120, 120);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
    background: #fff;
    color: #666;
    font-size: 14px;
    padding-left: 19px;
    font-weight: 400;
}
＆＃13; 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
  <div class="content" id="categories_content">
    <ul class="categories list-group">
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-camera"></i>
															</span>
        <span class="category_content">
								Camera
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								 
								<i class="fa fa-info-circle"></i>								
															</span>
        <span class="category_content">
								Clothes
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-mobile"></i>
															</span>
        <span class="category_content">
								Mobiles
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								 
								<i class="fa fa-info-circle"></i>								
															</span>
        <span class="category_content">
								Graphics Cards
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-television"></i>
															</span>
        <span class="category_content">
								Television
							</span>
      </li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

在i标记中，您可以使用类fa-fw，因此所有图标都具有相同的宽度

示例 

<i class="fa fa-television fa-fw"></i>

在所有i代码

中添加此类

＆＃13;
＆＃13; 
.category_nav
{
	height: 40px;
	margin-top: 38px;
}

.category_nav_ul
{
	list-style-type: none;
	padding:0;
}

.category_nav_ul > li
{
	display: inline-block;
}

#category_nav_ul_category
{
	width: 380px;
	cursor: pointer;
}

#category_nav_div
{
	margin-top: 5px;
	width: 380px;
	position: absolute;
	background-color: white;
	padding-bottom: 10px;
}

#categories_content
{
	margin-top: 10px; 
}


.category_nav_div .content:hover
{
}

.categories
{
	list-style: none;
}

.category
{
	padding-top: 6px;
	padding-bottom: 6px;
	margin-bottom: 1px;
	border: 0;
	border-radius: 0;
}

.category:hover
{
	border: 2px;
	background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
  	background-color: white;
  	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}

.category_icon
{
	width: 20px !important;
	padding-right: 5px;
	background-color: red;
}
.category_content
{
	margin-left: 15px !important;
}

.light-border
{
	border: 1px solid #e8e8e8;
	border-top: none;
}

h2.flash_title
{
	color: rgb(120, 120, 120);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
    background: #fff;
    color: #666;
    font-size: 14px;
    padding-left: 19px;
    font-weight: 400;
}
＆＃13; 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
  <div class="content" id="categories_content">
    <ul class="categories list-group">
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-fw fa-camera"></i>
															</span>
        <span class="category_content">
								Camera
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								 
								<i class="fa fa-fw fa-info-circle"></i>								
															</span>
        <span class="category_content">
								Clothes
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-fw fa-mobile"></i>
															</span>
        <span class="category_content">
								Mobiles
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								 
								<i class="fa fa-fw fa-info-circle"></i>								
															</span>
        <span class="category_content">
								Graphics Cards
							</span>
      </li>
      <li class="category list-group-item">
        <span class="category_icon">
								<i class="fa fa-fw fa-television"></i>
															</span>
        <span class="category_content">
								Television
							</span>
      </li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

Font-awesome有专门的课程。 FA-FW 

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

http://fontawesome.io/examples/

相关问题
最新问题