用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css

用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:55:24

原创

2316人浏览过

我的代码如下：

每页
记录

跳转至第页

我实现的效果如下（div中的select、ul、文字、button、text不能显示在一行中，如果让select、ul、文字、button、text显示在一行中呢？）：

截图在第二楼：

回复讨论(解决方案)

我的代码如下：

每页
记录

跳转至第页

我实现的效果如下（div中的select、ul、文字、button、text不能显示在一行中，如果让select、ul、文字、button、text显示在一行中呢？）：

截图在第二楼： LZ是要做成这个效果吗

LZ是要做成这个效果吗

去掉div，直接ul里添加两个li 把 select 和 input 分别包进去

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

登录后复制

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

登录后复制

效果：