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

最新推荐文章于 2018-12-16 18:07:22 发布

会飞的Pikachu

最新推荐文章于 2018-12-16 18:07:22 发布

阅读量1.2k

点赞数

分类专栏： CSS HTML 文章标签： html css

本文链接：https://blog.csdn.net/u011043843/article/details/40860567

版权

CSS 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

HTML

37 篇文章 0 订阅

订阅专栏

来源：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实现网页爬虫方式小结

会飞的Pikachu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于坛友的一个布局问题的解答

来源：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
复制链接

扫一扫

专栏目录