我正在使用以下代码创建 Bootstrap 寻呼机。
<style>
.navigation-bar .pagination {
margin-top: 0;
}
</style>
<div class="navigation-bar">
<span class="pull-left"><strong>Total record(s) 1000</strong></span>
<ul class="pagination pull-right">
<li>
<a href="#"><span class="glyphicon glyphicon-search"></span> Search</a>
</li>
<li>
<!--<a style="padding: 0; margin: 0; margin-top: 0; border-spacing: 0; border-collapse: collapse;"><div ddl-record-filter-count>Filter By</div></a>-->
<a style="padding: 6px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-backward"></span> First</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-backward"></span> Previous</a>
</li>
<li>
<a href="#"><span></span> 1</a>
</li>
<li>
<a href="#"><span></span> 2</a>
</li>
<li>
<a href="#"><span></span> 3</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-forward"></span> Next</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-forward"></span> Last</a>
</li>
</ul>
问题是下拉控件与其他控件不在同一高度。
请让我得到你的建议。
要查看我的问题的详细信息，请使用 chrome 并缩放到 110%
最佳答案
习惯了这种风格
.pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;}
演示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navigation-bar .pagination {
margin-top: 0;
}
.pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;}
</style>
</head>
<body>
<div class="navigation-bar">
<span class="pull-left"><strong>Total record(s) 1000</strong></span>
<ul class="pagination pull-right">
<li>
<a href="#"><span class="glyphicon glyphicon-search"></span> Search</a>
</li>
<li>
<!--<a style="padding: 0; margin: 0; margin-top: 0; border-spacing: 0; border-collapse: collapse;"><div ddl-record-filter-count>Filter By</div></a>-->
<a style="padding: 0px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-backward"></span> First</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-backward"></span> Previous</a>
</li>
<li>
<a href="#"><span></span> 1</a>
</li>
<li>
<a href="#"><span></span> 2</a>
</li>
<li>
<a href="#"><span></span> 3</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-forward"></span> Next</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-forward"></span> Last</a>
</li>
</ul>
</div>
</body>
</html>关于html - Bootstrap 分页控件的对齐方式相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34062144/