Rumah >hujung hadapan web >html tutorial >用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css_WEB-ITnose
用css来做，在下面这个div中，如何让select、ul、文字、button、text显示在一行中呢？（代码和截图如下)_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:55:241979semak imbas
我的代码如下：
我实现的效果如下（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> 效果： Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：求解怎样制作出这种样式_html/css_WEB-ITnoseArtikel seterusnya：搜狗市场高速下载以及网页端调起APP页面研究与实现_html/css_WEB-ITnose