设置元素浮动,出现高度塌陷导致鼠标无法点击

先贴代码片段:

<div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template>
</div>
<div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button>
</div>

上面两个div元素,分别添加了左浮动和右浮动,添加float属性之后,这两个div元素出现了高度塌陷的问题。
在第一个div元素中,有一个输入控件input元素,在父元素高度塌陷的情况下,这个输入框是无法被鼠标选中的,这时候可以用下面几种发发解决:

  • 为父元素设置高度
<div style="height: 20px;"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>
  • 父元素设置overflow属性
    overflow属性有auto、hidden、scroll、visible等值,这里建议设置为auto或者hidden都可以。

<div style="overflow: auto;"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>
  • 使用清除浮动
    清除浮动有两种方法,第一种:在浮动元素后面添加一个空div元素,并将起属性设置为clear:both;
<div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template>
</div>
<div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button>
</div>
<div style="clear: both;"></div>
  • 第二种方法清除浮动:在父元素上使用::after伪元素,并设置其content: “”; display: block; clear: both;属性
<div class="ddd"><div style="width: 30%; float: left;"><nz-input-group nzSearch [nzAddOnAfter]=" suffixIconButton"><input type="text" nz-input placeholder="请输入实验名称" [(ngModel)]="q.name" name="name" id="name" /></nz-input-group><ng-template #suffixIconButton><button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button></ng-template></div><div class="floatR"><button nz-button type="submit" nzType="dashed" style="color: #c71d24; border-color: #c71d24;"(click)="add()">新建实验</button><button nz-button type="reset" (click)="reset()" class="mx-sm">草稿箱</button></div>
</div>
.ddd::after{content: "";display: block;clear: both;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54692.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

glTF格式:WebGL应用的3D资产优化解决方案

摘要 glTF作为一种高效的3D资产格式&#xff0c;为WebGL、OpenGL ES和OpenGL运行时的应用提供了强有力的支持。它不仅简化了3D模型的传输与加载流程&#xff0c;还通过优化资产大小&#xff0c;使得打包、解包更加便捷。本文将深入探讨glTF格式的优势&#xff0c;并提供实用的代…

ClickHouse 与 Quickwit 集成实现高效查询

1. 概述 在当今大数据分析领域&#xff0c;ClickHouse 作为一款高性能的列式数据库&#xff0c;以其出色的查询速度和对大规模数据的处理能力&#xff0c;广泛应用于在线分析处理 (OLAP) 场景。ClickHouse 的列式存储和并行计算能力使得它在处理结构化数据查询时极具优势&…

初探shell与bash使用指南

文章目录 一、shell二、bash第一步、新建脚本第二步、添加权限第三步、执行bash脚本 在日常开发中&#xff0c;经常使用到Linux服务器相关知识&#xff0c;输入命令获取想要的结果&#xff0c;本篇介绍shell 与 bash的相关知识。 一、shell 是命令行解释器&#xff0c;接收用户…

nlohmann json:读写json文件

读写json文件是经常的操作,可以通过如下的方式完成: #include <string> #include <iostream> #include <fstream> #include <filesystem> #include <nlohmann/json.hpp>using namespace std; using json = nlohmann::json; namespace fs = st…

使用nc命令检测UDP端口

使用nc命令检测UDP端口也是非常的简单&#xff0c;需要注意的是&#xff0c;所安装nc的版本不同&#xff0c;使用选项有点差异。 1、检测开启的UDP nc -vuz 192.168.2.201 5353 nc -vuz 192.168.2.201 37430 端口正常启用时&#xff0c;会提示“UDP packet sent successful…

深入解析网络通信关键要素:IP 协议、DNS 及相关技术

我的主页&#xff1a;2的n次方_ 1. IP 协议报头结构 4 位版本&#xff1a;表示 IPv4 / IPv6 4 位首部长度&#xff1a;表示 IP 报头的长度&#xff0c;以 4 字节为单位 8 位服务类型&#xff1a;包括 3 位优先权字段&#xff08;已弃用&#xff09;&#xff0c;4 位 TOS 字…

电路 - 笔记2

1 555 芯片 2 类比 - pU*I 与 Fm*a 是不是可以与牛顿定律类比 - Fm*a 人的力量&#xff08;F&#xff09;有限。 当推大箱子&#xff08;m&#xff09;时&#xff0c;加速度&#xff08;a&#xff09;就不会很大 当推小箱子&#xff08;m&#xff09;时&#xff0c;加速度…

分布式框架 - ZooKeeper

一、什么是微服务架构 1、单体架构 顾名思义一个软件系统只部署在一台服务器上。 ​ 在高并发场景中&#xff0c;比如电商项目&#xff0c;单台服务器往往难以支撑短时间内的大量请求&#xff0c;聪明的架构师想出了一个办法提高并发量&#xff1a;一台服务器不够就加一台&am…

球体检测系统源码分享

球体检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

Ubuntu20.04点击文件闪退

在 Ubuntu 系统下&#xff0c;如果点击文件按钮导致系统闪退&#xff0c;可以尝试以下几种解决方法&#xff1a; 更新系统和应用程序&#xff1a; 确保你的系统和所有应用程序都是最新版本。可以通过终端执行以下命令来更新系统&#xff1a; sudo apt update sudo apt upgrade重…

python爬虫解析神器Xpath——lxml库(9)

文章目录 1、Xpath1.1 什么是xpath?1.2 xpath的原理1.3 xml介绍1.3.1 什么是xml?1.3.2 xml和html的区别?1.3.3 xml文档的节点关系1.4 xpath语法的使用1.4.1 选取节点1.4.2 选取未知节点1.4.3 同时使用多个路径表达式2、lxml库2.1 介绍2.2 基础使用2.3 文件读取html文档2.4 实…

springboot实战学习笔记(5)(用户登录接口的主逻辑)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发以及注册时的参数合法性校验。具体往回看了解的链接如下。 springboot实训学习笔记&#xff08;4&#xff09;(Spring Validation参数校验框架、全局异常处理器)-CSDN博客文章浏览阅读576次&#xff0c;点赞7…

Agile Modbus STM32裸机移植 从机使用

本教程手把手教你实现Agile Modbus,照抄就能成。 并且会解读函数功能含义。 1. 引言 Agile Modbus 是一个轻量级的 Modbus 协议栈,可以满足用户在任何场景下的需求。 功能 支持 rtu 和 tcp 协议,使用纯 C 语言开发,不涉及任何硬件接口,可以直接在任何形式的硬件上使用。由…

序列化与反序列化深入分析:UUID案例的实践与JSON转换对比

在Java开发中&#xff0c;序列化和反序列化是非常重要的概念。序列化是将对象的状态转换为字节流的过程&#xff0c;而反序列化则是将字节流恢复为对象的过程。本文将以UUID序列化案例和JSON转换为例&#xff0c;深入探讨这两者的具体实现及应用场景。 1. Java 序列化与反序列化…

深入理解Spring Data JPA与接口编程

目录 1. 什么是Spring Data JPA&#xff1f; 2. 如何使用Spring Data JPA&#xff1f; 3. 示例代码 4. 使用Query注解 5. 拓展知识&#xff1a;接口编程的好处 6. 结论 在软件开发领域&#xff0c;接口&#xff08;Interface&#xff09;是一种定义了方法签名但没有实现的…

Fyne ( go跨平台GUI )中文文档-小部件 (五)

本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2 这是一个系列文章&#xff1a; Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne ( go跨平台GUI…

给子组件传递dom元素引用实例方案

在实际开发中有一个比较常见的场景是&#xff0c;父组件写了一个el-form组件。然后里面内容很多&#xff0c;所以拆成了子组件。那么子组件中就有调用父组件的form实例方法的需求。到所以这就涉及一个问题&#xff0c;怎么把父组件的form实例传递给子应用。 这里传递后直接调用…

任意长度并行前缀和 扫描算法 《PMPP》笔记

下面的算法针对于任意长度输入 对于大数据集&#xff0c;首先将输入分为几段&#xff0c;每一段放进共享内存并用一个线程块处理&#xff0c;比如一个线程块使用1024个线程的话&#xff0c;每个块最多能处理2048个元素。 在前面代码中&#xff0c;一个块最后的执行结果保存到了…

数据结构:单链表实现信息管理

一、函数声明部分 #ifndef __LINK_H__ #define __LINK_H__ #include <myhead.h> typedef struct Link1 {union{int len;//用于头结点&#xff0c;统计节点个数int data;//用于正常节点&#xff0c;存储数据};struct Link1 *next;//指针域 }Link,*Plink;/**********函数声…

【JS】函数柯里化

固定某些参数&#xff0c;返回接受剩余参数的新函数&#xff0c;如果没有剩余参数&#xff0c;就调用。 将多个参数的函数转换为单个参数的函数 作用&#xff1a;参数复用&#xff0c;延迟计算… // 传入参数不限&#xff0c;不能丢失传入的参数 function add() {// 不设置形参…