开发者社区> 问答> 正文

为什么li中的s设成block,会和后边的a有一大段距离呢?

小衣服图标为什么和后边的a有那么大段距离呢
a不是block
screenshot

展开
收起
a123456678 2016-05-27 11:52:47 1879 0
1 条回答
写回答
取消 提交回答
  • <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8"/>
      <title>示例</title>
      <style>
        html {
          font-size: 10px;
        }
        body {
          font-size: 1.4rem;
        }
        .list ul {
          list-style: none;
          margin: 0;
          padding: 0;
          line-height: 2.9rem;;
        }
        .list ul li {
          border: 1px solid #ddd;
          margin-top: -1px;
        }
        .list ul li a {
          display: block;
          padding: 0 0 0 3rem;
          position: relative;
          text-decoration: none;
          color: #333;
        }
        .list ul li a:hover {
          background-color: #f0f0f0;
          color: #090;
        }
        /**
         * 在下面写 background 加图片即可
         */
        .list ul li a:before {
          content: "?";
          position: absolute;
          width: 2rem;
          height: 2rem;
          left: .5rem;
          top: .5rem;
          border-radius: 1rem;
          line-height: 2rem;
          text-align: center;
          background: #f0f0f0;
        }
        .list ul li a:hover::before {
          content: "@"
        }
      </style>
    </head>
    <body>
    <div class="list">
      <ul>
        <li><a href="#">这是一个标题</a></li>
        <li><a href="#">这是一个标题</a></li>
        <li><a href="#">这是一个标题</a></li>
        <li><a href="#">这是一个标题</a></li>
        <li><a href="#">这是一个标题</a></li>
      </ul>
    </div>
    </body>
    </html>
    2019-07-17 19:17:38
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载