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
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:55:242005browse
我的代码如下：
d1ef8129d79bbe62eebc8e024a2214a9
每页1b1c3c0ecdd85243ca4e4606378a2528
9c3c7dc355ad44cdba382d47a1d61156204afa15d3069109ac30911f04c56f3338
975fa1898daa3a38df666fc3f38d6adb304afa15d3069109ac30911f04c56f3338
1f4238932b56c45b41954d17165c7205504afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341
记录
9dce11e3f4970640fef380c86538726b
25edfb22a4f469ecb59f1190150159c6459e3b002c7e94b6e5108d25a3a72237《5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e755ce148b34bfd0074e74a47de5b79015db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67cc57e55c1e548d35592d75a1a01ecbc25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6b0946133155cc92678ed213673e854f535db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e4b36cfacb7b967642c596fd5e7952e745db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c631e7e307dc88cac111c49dd25f4cbf9b55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
跳转至第f23ef079ecec3569d5ca44831fbea181页
47345e49e8a341e3b00720a3ec445cbf
16b28748ea4df4d9c2150843fecfba68
我实现的效果如下（div中的select、ul、文字、button、text不能显示在一行中，如果让select、ul、文字、button、text显示在一行中呢？）：
截图在第二楼：
回复讨论(解决方案)
我的代码如下：
d1ef8129d79bbe62eebc8e024a2214a9
每页1b1c3c0ecdd85243ca4e4606378a2528
9c3c7dc355ad44cdba382d47a1d61156204afa15d3069109ac30911f04c56f3338
975fa1898daa3a38df666fc3f38d6adb304afa15d3069109ac30911f04c56f3338
1f4238932b56c45b41954d17165c7205504afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341
记录
9dce11e3f4970640fef380c86538726b
25edfb22a4f469ecb59f1190150159c6459e3b002c7e94b6e5108d25a3a72237《5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e755ce148b34bfd0074e74a47de5b79015db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c67cc57e55c1e548d35592d75a1a01ecbc25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6b0946133155cc92678ed213673e854f535db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e4b36cfacb7b967642c596fd5e7952e745db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c631e7e307dc88cac111c49dd25f4cbf9b55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
跳转至第f23ef079ecec3569d5ca44831fbea181页
47345e49e8a341e3b00720a3ec445cbf
16b28748ea4df4d9c2150843fecfba68
我实现的效果如下（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>
<!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> 效果：