我将块状元素转成内联块状元素,然而有些内联块状元素却不会在同一行。

来源:12-4 我还要站个大位置 - 内联块状元素

望持

2020-03-03 09:55


<!DOCTYPE HTML>

<html>

<head>

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

<title>流动模式下的块状元素</title>

<style type="text/css">

#box1{

    width:300px;

    height:100px;

}

div,h1,p{display:inline-block;

    border:1px solid red;

}

</style>

</head>

<body>

    <div id="box2">box2</div><!--块状元素,由于没有设置宽度,宽度默认显示为100%--> 

    <h1>标题</h1><!--块状元素,由于没有设置宽度,宽度默认显示为100%--> 

    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素,由于没有设置宽度,宽度默认显示为100%--> 

    

    <div id="box1">box1</div><!--块状元素,由于设置了width:300px,宽度显示为300px-->

</body>

</html>

写回答 关注

3回答

  • 小鱼鱼同学
    2020-03-16 18:06:53

    只是因为运行后的页面太小了放不下,放在在VS code里面写就是一行的了。

  • 一条只会喊666的咸鱼
    2020-03-04 12:20:18

    #box2的宽度问题?

    望持

    不,就是单纯的,为什么标题和文本以及box1不在同一个水平上,他们都是内联块状,包含内联都在同一水平上的特点,所以我就有点纳闷,你知道为什么吗?

    2020-03-04 17:57:14

    共 1 条回复 >

  • 望持
    2020-03-03 09:56:53

    http://img4.mukewang.com/5e5db9540001159b07960600.jpg

    这是运行结果

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

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

1225806 学习 · 18234 问题

查看课程

相似问题