Heim >Web-Frontend >HTML-Tutorial >用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css_WEB-ITnose
用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:242002Durchsuche
我的代码如下：
我实现的效果如下（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> 效果： Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求解怎样制作出这种样式_html/css_WEB-ITnoseNächster Artikel：搜狗市场高速下载以及网页端调起APP页面研究与实现_html/css_WEB-ITnose