Community

Learn

Tools Library

AI Tools

Leisure

English

Home > Web Front-end > HTML Tutorial > Use css to do it. In the following div, how to make select, ul, text, button, and text appear in one line? (Code and screenshots are as follows)_html/css_WEB-ITnose

Use css to do it. In the following div, how to make select, ul, text, button, and text appear in one line? (Code and screenshots are as follows)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:55:24

Original

1999 people have browsed it

我的代码如下：

每页
20
30
50

记录

《

跳转至第页

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

截图在第二楼：

回复讨论(解决方案)

我的代码如下：

每页
20
30
50

记录

《

跳转至第页

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

截图在第二楼：

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>

Copy after login

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

Copy after login

效果：

source：php.cn

Previous article：Find out how to create this style_html/css_WEB-ITnose Next article：Research and implementation of high-speed downloading in Sogou market and loading APP pages on the web page_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn