用css来做，在下面这个div中，怎么让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)
用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)
我的代码如下：
<div id="changpage" style="text-align:center; width:100%; border:solid 1px red; height:50px;">
每页<select id="selNum" style="float:center;">
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
记录
<ul id="ulPageNav">
<li><a href="#" onclick="upPage(0)">《</a></li>
<li><a href="#" onclick="upPage(1)">1</a></li>
<li><a href="#" onclick="upPage(2)">2</a></li>
<li><a href="#" onclick="upPage(3)">3</a></li>
<li><a href="#" onclick="upPage(4)">4</a></li>
<li><a href="#" onclick="upPage(5)">5</a></li>
</ul>
跳转至第<input type="text" id="goPageNume" onkeyup="onlyNum()" />页
<input type="button" id="btnGo" onclick="goPage()" value="Go" />
</div>
我实现的效果如下（div中的select、ul、文字、button、text不能显示在一行中，如果让select、ul、文字、button、text显示在一行中呢？）：
截图在第二楼：
------解决思路----------------------
我的代码如下：
<div id="changpage" style="text-align:center; width:100%; border:solid 1px red; height:50px;">
每页<select id="selNum" style="float:center;">
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
记录
<ul id="ulPageNav">
<li><a href="#" onclick="upPage(0)">《</a></li>
<li><a href="#" onclick="upPage(1)">1</a></li>
<li><a href="#" onclick="upPage(2)">2</a></li>
<li><a href="#" onclick="upPage(3)">3</a></li>
<li><a href="#" onclick="upPage(4)">4</a></li>
<li><a href="#" onclick="upPage(5)">5</a></li>
</ul>
跳转至第<input type="text" id="goPageNume" onkeyup="onlyNum()" />页
<input type="button" id="btnGo" onclick="goPage()" value="Go" />
</div>
我实现的效果如下（div中的select、ul、文字、button、text不能显示在一行中，如果让select、ul、文字、button、text显示在一行中呢？）：
截图在第二楼：
------解决思路----------------------
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul
{
list-style: none;
}
.pagediv
{
float: left;
}
ul li
{
float: left;
}
a
{
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
line-height: 24px;
width: 24px;
height: 24px;
}
a:hover
{
text-decoration: none;
color: red;
}
.seldiv
{
float: left;
margin: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="pagediv">
<ul>
<li><a href="">《</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">》</a></li>
</ul>
</div>
<div class="seldiv">
每页
<select>
<option>20</option>
<option>30</option>
<option>50</option>
</select>
记录跳转至第<input type="text">页
<input type="button" value="Go">
</div>
</div>
</body>
</html>