块状元素、行内元素、行内块状元素同行换行显示以及float后的情况

本文介绍了HTML中元素的布局技巧,包括如何使用float属性使div元素同行显示,span元素通过float实现换行显示,以及button和input作为行内块状元素的默认显示方式和改变方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Div同行显示,给设置float属性,脱离文档流

    <div style="width:300px;background-color:red;float:left;">DIV1</div>
    <div style="width:200px;background-color:blue;float:left;">DIV2</div>
    <div style="width:200px;background-color:yellow;float:left;">DIV3</div>

效果
这里写图片描述

Span同行换行float之后

    <span>你好好好</span>
    <span>你好好好</span>
    <span style="display:block;width:300px;background-color:red;">他被设置了block</span>
    <span style="background-color:blue;">我好好好</span>
    <span>他之前的</span>
    <span style="float:left;">我被设置了float:left</span>
    <span>他之后的</span>

效果
这里写图片描述

Button、Input是行内块状元素,本身是同行显示

Button:
<button name="1">按钮</button>
    <button name="2" style="display:block;">我要占一行</button>
    <button name="3">按钮</button>
    <button name="3">按钮</button>
    <button name="4">float前面的</button>
    <button name="3"style="float:left;">float:left</button>
    <button name="4">float后面的</button>
    <button name="5">按钮</button>
    <button name="5">按钮</button>

效果
这里写图片描述

input:
    <input name="1"value="你好"/>
    <input name="1"value="你好"/>
    <input name="1"value="我要占一行" style="display:block;"/>
    <input name="1"value="大家好"/>
    <input name="1"value="float前面的"/>
    <input name="1"value="float:left" style="float:left;"/>
    <input name="1"value="float后面的"/>
    <input name="1"value="大家好"/>

效果
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值