html - 如何以相似的边距对齐图标和字体

Question

我试图让我的图标和文本具有相同的填充或边距。如果您运行代码，您会看到一个类别靠近图标，而另一个则远离。我想要一致性。我尝试了很多东西，但它没有反射(reflect)任何东西

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

<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>

Answer 1

在i标签中你可以使用类fa-fw，所以所有的图标都有相同的宽度

示例

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

在所有的i标签中添加这个类

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

<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>