关于坛友的一个布局问题的解答

来源：http://www.ido321.com/1147.html

需求：让select、ul、文字、button、text显示在一行中，效果戳：http://bbs.csdn.net/topics/390915380?page=1#post-398415668

 

我的实现例如以下

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;
    }

效果：


下一篇：网页抓取：PHP实现网页爬虫方式小结


posted @ 2017-05-25 12:29  wzzkaifa  阅读(120)  评论(0)  编辑  收藏  举报