我正在尝试将我的图标文本对齐到同一级别。但是,当窗口调整大小时,它们会变形,如小提琴中所示。我怎样才能让它们彼此相邻?
这是我的小提琴: https://jsfiddle.net/whywymam/72qp7c6L/
我的HTML:
<div id="btnTopInline">
<ul class= "nav navbar-nav navbar-right hidden-xs">
<div class="col-sm-3 col-md-3 col-lg-3">
<li>
<div class="indivColl">
<a href="signupLogin.php">
<img src="https://i.stack.imgur.com/pBLqM.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
</li>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<li>
<div class="empColl">
<a href="signupLoginEmp.php">
<img src="https://i.stack.imgur.com/Dbaoj.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</li>
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
</ul>
</div><!-- end btnTopInline -->
<div class="col-xs-2 col-xs-push-6 padBtnRight">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLogin.php">
Job Seeker<br>Log In
</a>
</button>
</div>
<div class="col-xs-2 col-xs-push-7">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLoginEmp.php">
Employer<br>Log In
</a>
</button>
</div>
<div class="clearfix visible-xs-block"></div>