问题 - li 标签无法设置宽度和高度

最新推荐文章于 2021-12-08 16:20:06 发布

Nshrod

最新推荐文章于 2021-12-08 16:20:06 发布

阅读量6.9k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Q&A 文章标签： html5 css css3

本文链接：https://blog.youkuaiyun.com/Nshrod/article/details/112619159

Q&A 专栏收录该内容

3 篇文章

订阅专栏

li 标签无法设置宽度和高度

首先看一下代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>图片相册</title>
  </head>
  <body>
    <!-- 首先将HTML结构搭建起来 -->
    <img class="bigImg" src="./images/kate1.jpg" alt="" width="300px" height="360px">
    <ul>
      <li>
        <a href="">
          <img class="smallImg" src="./images/kate01.jpg" alt="" width="50px" height="70px">
        </a>
      </li>
      <li>
        <a href="">
          <img class="smallImg" src="./images/kate02.jpg" alt="" width="50px" height="70px">
        </a>
      </li>
      <li>
        <a href="">
          <img class="smallImg" src="./images/kate03.jpg" alt="" width="50px" height="70px">
        </a>
      </li>
      <li>
        <a href="">
          <img class="smallImg" src="./images/kate04.jpg" alt="" width="50px" height="70px">
        </a>
      </li>
      <li>
        <a href="">
          <img class="smallImg" src="./images/kate05.jpg" alt="" width="50px" height="70px">
        </a>
      </li>
    </ul>

    <!-- 设置一下样式 -->
    <style media="screen">
      *{
        padding: 0px;
        margin: 0px;
      }

      ul{
        overflow: hidden;
        list-style: none;
        height: 100px;
      }
     ul li{
        display: inline;
        /* vertical-align: middle; */
        margin-left: 10px;
        padding: 5px;
        height: 80px;
        width: 60px;
        border: 1px solid ;
      }

      a{
        text-decoration: none;
        margin: 0px;
      }

      .bigImg{
        margin-bottom: 10px;
        padding: 7px;
      }

    </style>


  </body>
</html>

问题原因：将块级元素设置成行内元素

  ul li{
        display: inline;
        /* vertical-align: middle; */
        margin-left: 10px;
        padding: 5px;
        height: 80px;
        width: 60px;
        border: 1px solid ;
      }