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

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

WBOY
Libérer: 2016-06-24 11:55:24
original
1985 Les gens l'ont consulté

我的代码如下:



每页
记录



跳转至第



 
我实现的效果如下(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>
Copier après la connexion
Copier après la connexion

   <!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>
Copier après la connexion
Copier après la connexion

效果:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal