css属性 content

  对css一直没有很系统得学习过,练习得也不是很多,纯小白.今天在写一个页面的时候,遇到一个问题,就是如何让外面的盒子适应里面的盒子大小,完美地把小盒子包在里面.

  由于里面是一个列表 ul,为了让元素横排,我使用了float:right这个属性,所以列表悬浮了.如图:

 

  其实当然可以直接给外层id为outer的盒子定义长和宽,但我不想这样.下面是解决方法:

    #outer ul:after{ /*使用afer伪类,用content在ul后面随便添加一点内容*/

    content:".";   

    display:block; /*表示为块级元素*/

    height:0; /*将content高度设置为0,使不影响其他样式*/
    clear:both; /*清楚浮动,否则该层会在ul之上结束 */
    visibility:hidden; /*隐藏它*/
  }

 

  这样就能得到想要的效果

                      

转载于:https://www.cnblogs.com/julyys/p/4415343.html

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

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

相关文章

js时间延迟执行函数

setTimeout(yourFunction(),5000); 5秒后执行yourFunction(),只执行一次 var tsetTimeout("javascript语句",毫秒) clearTimeout(t); 取消setTimeout() setInterval(yourFunction(),5000); 每隔5秒执行一次 如果在yourFunction()中再次调用了setTimeo…

一文汇总 JDK 5 到 JDK 15 中的牛逼功能!

前言JDK 16 马上就要发布啦(预计 2021.3.16 日发布),所以在发布之前,让我们先来回顾一下 JDK 5-15 的新特性吧,大家一起学起来~Java 5 新特性1. 泛型泛型本质是参数化类型,解决不确定具体对象类型的问题。L…

Tomcat 6.0 简介

本片翻译来自:http://tomcat.apache.org/tomcat-6.0-doc/introduction.html 介绍 无论是开发者还是tomcat管理员在使用前都需要了解一些必要的信息,本篇简单的介绍tomcat中的一些术语和概念。比如context是web应用的意思。CATALINA_HOME 在文档中&#x…

JavaScript编写了一个计时器

初学JavaScript,用JavaScript编写了一个计时器。 设计思想: 1、借助于Date()对象,来不断获取时间点; 2、然后用两次时间点的毫秒数相减,算出时间差; 3、累加时间差,这样就能把计时精确。 ps…

Docker部署SpringBoot的两种方法,后一种一键部署超好用!

作者 | LemonSquash来源 | cnblogs.com/npeng/p/14267007.html1.手工方式1.1.准备Springboot jar项目将项目打包成jar1.2.编写DockerfileFROM java:8 VOLUME /tmp ADD elk-web-1.0-SNAPSHOT.jar elk.jar EXPOSE 8080 ENTRYPOINT ["java","-Djava.security.egdfi…

用JavaScript将字符串中的单词大写

String in JavaScript is a sequence of characters. And capitalizing characters of words in a JavaScript string will change each character of the string with the capital letter of it. JavaScript中的字符串是字符序列。 而将JavaScript字符串中的单词大写会更改字…

UISwitch 添加 标签

给UISwitch添加一个标签。左右滑动时候出现开关标签内容。 代码: // // UISwitchJGLabel.h // JGSwitch // // Created by sl on 15/4/11. // Copyright (c) 2015年 Madordie. All rights reserved. // // // 说明: // 1.给UISwitch添加开关标…

爱了!蚂蚁开源的“SpringBoot”框架,新增了这6项功能...

SOFABoot 是蚂蚁金服开源的基于 Spring Boot 的研发框架,它在 Spring Boot 的基础上,提供了诸如 Readiness Check,类隔离,日志空间隔离等等能力。在增强了 Spring Boot 的同时,SOFABoot 提供了让用户可以在 Spring Boo…

JS关键字和保留字汇总

转载:http://www.itxueyuan.org/view/6627.htmlECMA-262 描述了一组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。以下就是ECMAScri…

PUC的完整形式是什么?

PUC:大学预科/污染控制/个人解锁码 (PUC: Pre University Course / Pollution Under Control / Personal Unlock Code) 1)PUC:大学预科课程 (1) PUC: Pre University Course) PUC is an abbreviation of the Pre University Course. It alludes to an in…

Sizzle.selectors.match/leftMatch

对象Sizzle.selectors.match/leftMatch中存放了表达式类型和正则的映射,正则用于确定块表达式的类型,并解析其中的参数。 相关代码如下: var Expr Sizzle.selectors {match : {ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.))/,CLASS: /\.((?:[\w\u…

过滤器VS拦截器的4个区别,看完豁然开朗!

Spring的拦截器与Servlet的Filter有相似之处,比如二者都是AOP编程思想的体现,都能实现权限检查、日志记录等。但它们之间又有很大区别,所以本文磊哥就带大家全面了解一下什么是过滤器?什么是拦截器?以及二者有什么区别…

js 自己试验 创建对象例子

js 创建对象例子 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script>function login() {alert(this.username " - login");}function CreateUser(username, password) { // var us…

云计算应用迁移_应用迁移策略到云

云计算应用迁移Rehost: 重新托管&#xff1a; Rehosting an application to the cloud without making changes to its architecture or code. 将应用程序重新托管到云&#xff0c;而无需更改其架构或代码。 Refactor: 重构&#xff1a; Involves application code and conf…

看美文,记单词(6)

combat vt.反对&#xff0c;与..战斗 vi.战斗&#xff0c;搏斗 n. 战争&#xff0c;争论 adj. 战斗的.. intensify vi. 增强&#xff0c;强化 vt. 使加强&#xff0c;使强化 detention n. 拘留&#xff0c;挽留&#xff0c;延迟 administrative detention 行政…

分布式ID生成的9种方法,特好用!

前言业务量小于500W或数据容量小于2G的时候单独一个mysql即可提供服务&#xff0c;再大点的时候就进行读写分离也可以应付过来。但当主从同步也扛不住的是就需要分表分库了&#xff0c;但分库分表后需要有一个唯一ID来标识一条数据&#xff0c;数据库的自增ID显然不能满足需求&…

js对象的定义方法

转载&#xff1a;http://blog.sina.com.cn/s/blog_60f632050100wz7h.html &#xff08;1&#xff09;基于已有对象的扩充方法&#xff1a;适用于临时构建对象&#xff0c;弊端&#xff1a;每次构建对象都要新建一个。 var objectnew Object();object.name"Tom";objec…

8051 管脚定义_8051微控制器的引脚说明

8051 管脚定义8051微控制器的引脚说明 (Pin Description of 8051 Microcontroller) Pins from 1-8 1-8针 Port 1: The pins in this port are bi-directional and can be used for input and output. The pins are individually controlled; some are used for input while ot…

android 事件分发

2019独角兽企业重金招聘Python工程师标准>>> 文章来源于CSDN http://blog.csdn.net/lanhuzi9999/article/details/26515421 转载于:https://my.oschina.net/lhjtianji/blog/398998

对象复制的7种方法,还是Spring的最好用!

日常编程中&#xff0c;我们会经常会碰到对象属性复制的场景&#xff0c;就比如下面这样一个常见的三层 MVC 架构。当我们在上面的架构下编程时&#xff0c;我们通常需要经历对象转化&#xff0c;将业务请求流程经历三层机构后需要把 DTO 转为DO然后在数据库中保存。当需要从数…