关于流动模型

来源:13-3 排队显示-流动模型(二)

慕田峪9304305

2018-04-08 19:18

<!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标签的内容连在一起



写回答 关注

5回答

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

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

    慕田峪930...

    非常感谢!

    2018-04-08 20:26:39

    共 1 条回复 >

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

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

    慕田峪930...

    知道了,谢谢

    2018-04-08 20:39:46

    共 1 条回复 >

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

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

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

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

    慕田峪930...

    谢谢。我知道了

    2018-04-08 20:31:04

    共 1 条回复 >

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

    a的width要再长一点

    慕田峪930...

    谢谢,我知道了

    2018-04-08 20:31:23

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225309 学习 · 18230 问题

查看课程

相似问题