问答详情
源自：13-3 排队显示-流动模型（二）

关于流动模型

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>流动模式下的内联元素</title>

<style type="text/css">

a,span,em,strong{

    display:inline-block;

    width:100px;

    height:100px;

}

</style>

</head>

<body>

    <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>

    <strong>强调</strong>

</body>

</html>

为什么<strong>的强调会跑到下面去。而且a标签和span标签的内容连在一起



提问者：慕田峪9304305 2018-04-08 19:18

个回答

  • 麦麦kathy
    2018-04-08 20:24:20
    已采纳

    全屏展示就显示在一行了https://img2.mukewang.com/5aca09f20001addc03820175.jpg

    0
  • 笔言飞
    2018-04-08 20:36:17

    刚刚回答的太随意，课程里有这么一句话：元素宽度在不设置的情况下，是他本身容器的100％（和父元素的宽度一致），除非设定一个宽度。所以你这个代码里设置了长宽，但是链接本身的长度超过了你设置的宽度，就溢出了，所以会和后面的挤在一起。

    0
  • 绿树红花小草地
    2018-04-08 20:32:12

    第二个应该是a标签的内容超出了设置的宽度 （我也是小白，求大神纠错）

    0
  • 绿树红花小草地
    2018-04-08 20:29:35

    大概知道第一个问题，因为设置了行高是100px，你全屏来看就在一行了

    0
  • 笔言飞
    2018-04-08 20:22:41

    a的width要再长一点

    0