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

最新推荐文章于 2022-10-27 15:10:07 发布

Nshrod

最新推荐文章于 2022-10-27 15:10:07 发布

阅读量5.7k

点赞数 5

分类专栏：前端问题文章标签： html5 css css3

本文链接：https://blog.csdn.net/Nshrod/article/details/112619159

版权

前端问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

问题1：什么是块级元素，什么是行内元素：

块级元素：
前后带换行符，独占一行的元素，不能设置宽和高。
display: block;
行内元素：
前后不换行，但是同时也不能设置宽高的元素。
display: inline;

问题2：那些常用元素是块级元素，那些常用元素是行内元素：

块级元素：
div p table form h1~h7 ul li ol menu…
行内元素：
span a b img input i em strong…

解决办法：将元素设置成为行内块元素

display:inline-block;

Nshrod

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
问题 - li 标签无法设置宽度和高度

li 标签无法设置宽度和高度<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>图片相册</title> </head> <body>  <img class="bigImg" src="./imag
复制链接

扫一扫