导致换行因素很多，看你怎么定义的了，但总体上来说大多是：溢出换行，内容超过了父元素可用空间，会换行。
可以考虑的解决方法：
强制限制各个子元素（你的三行元素）长度，确保三列总宽度不超过父元素的可用宽度（三行元素的内外边距和边框易被人为忽略导致总宽度超过可用宽度的100%）。这种情况常出现在浮动元素上。
<div id="fa"><div id="sub1"></div>
<div id="sub2"></div>
<div id="sub3"></div>
</div>
<!--
（#sub1+#sub2+sub3）的实际宽度 小于或等于 #fa的可用宽度
实际宽度 = sub的内外边距+边框+可用宽度
-->
不同的定义会有不同原因的，最好贴出你的代码，好让大家帮你解决。
可以这种思路，其实就是假设6x+5y=100%，然后最后一个浅蓝不要右边距<div class="fa">
<p></p>
<div class="son">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p class="last"></p>
</div>
</div> <style type="text/css">
.fa{width: 800pxheight: 800pxmargin-bottom: 20px}
.fa p{width: 100%height: 50pxbackground: #2b7fbf}
.fa .son{width: 100%height: 200px}
.son p{width: 15%height: 200pxbackground: #b1cae6float: leftmargin-right: 2%}
.son p.last{margin-right: 0}
</style>
可以的，你可以看一看，加上i标签后就成了斜体了。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#"><i>这是斜体</i></a>
<a href="#">这是正体</a>
</body>
</html>
可以的，给你附上完整代码，你试一试
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
width: 57px
height: 30px
color: #ABA2B7
line-height: 30px
margin: 0 4px
}
a i{
font-size: 16px
color: #F10215
}
</style>
</head>
<body>
<a><i class="fa fa-map-marker">北京</i></a>
<a href="#"><i>这是斜体</i></a>
<a href="#">这是正体</a>
</body>
</html>
给你指个错：你的“北京”没有在i标签里面
