首頁 >web前端 >html教學 >用css来做,在下面这个div中,如何让select、ul、文字、button、text显示在一行中呢?(代码和截图如下)_html/css_WEB-ITnose

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

WBOY
WBOY原創
2016-06-24 11:55:241979瀏覽

我的代码如下:



每页
记录



跳转至第



 
我实现的效果如下(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>

效果:
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn