Home > Article > Web Front-end > Answer to a layout question from a forum friend_html/css_WEB-ITnose
Answer to a layout question from a forum friend_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:331080browse
Source: http://www.ido321.com/1147.html
Requirement: Let select, ul, text, button, text be displayed in one line, Effect stamp: http://bbs.csdn.net/topics/390915380?page=1#post-398415668
My implementation is as follows
HTML:
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </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>
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; } Effect:
Next article: Web crawling: Summary of how to implement web crawling with PHP
An answer to a forum friend’s layout question
Statement：
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