<div style="width:80px;height:50px;position:relative;left:50px;">

  <ul style="position:absolute;top:100%;background:#f00;margin:0;padding:0;">

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

  </ul>

</div>

<div style="width:80px;height:50px;position:relative;left:50px;">

  <ul style="position:absolute;top:100%;background:#f00;margin:0;padding:0;">

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

    <li style="float:left;width:33px;padding:0;margin:0;">A</li>

  </ul>

</div>

在pos:a元素不设定宽度的情况下，他的最大宽度是受父元素的宽度所限制的。的更多相关文章

  1. 小程序行内元素且有border的情况下，根据文字宽度自动调节元素宽度

    比如认识成都: <view style="display: flex;align-items: center;"> <text class="cityV ...

  2. 解决flex布局下， elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  3. [转] 在body中没有元素把高度撑开的情况下，设置全屏

    [From] https://segmentfault.com/q/1010000006182839 html,body { margin:; padding:; min-height: 100vh; ...

  4. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  5. 父元素高度为auto,子元素使用top:-50%没有效果的问题

    无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...

  6. CSSmargin击穿问题（子元素margin-top会影响父元素）

    最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...

  7. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  8. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  9. HTML 父元素与子元素之间的margin-top问题

    问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...

随机推荐

  1. POJ 2318 TOYS | 二分+判断点在多边形内

    题意: 给一个矩形的区域(左上角为(x1,y1) 右下角为(x2,y2)),给出n对(u,v)表示(u,y1) 和 (v,y2)构成线段将矩形切割 这样构成了n+1个多边形,再给出m个点,问每个多边形 ...

  2. IE6对!important单个的类是支持的

    "!important"是什么? 第一个,是设置样式的优先级,设了!important的样式的属性优先于id选择器和class选择器.,比如id为"Main"的 ...

  3. spring in action 学习笔记十三：SpEL语言（Spring Expression Language）

    SpEl语言的目的之一是防止注入外部属性的代码硬代码化.如@Value("#{student.name}")这个注解的意思是把Student类的name的属性值注入进去.其中stu ...

  4. 翻煎饼_简单模拟_C++

    一.题目描述(懒人可直接跳过看题目概述) 题目来源: SWUST OJ  题目0254 http://acm.swust.edu.cn/problem/0254/ 二.问题概述 给出一列数,每次可将包 ...

  5. 为什么js引入页面后不起作用？

    为什么js引入页面后不起作用? 例如常见的报错:Uncaught ReferenceError: $ is not defined. 可能出现这种情况的原因如下: 原因一: 引入js的位置不对,应在使 ...

  6. nginx 根据url访问次数限制

    #获取日期 date=`date +"%y%m%d"` #设置日志路径 data="/data/logs/abc.com/access.log" #配置文件路径 ...

  7. sql server判断数据库、表、列、视图是否存在

    1 判断数据库是否存在 if exists (select * from sys.databases where name = '数据库名') drop database [数据库名] 2 判断表是否 ...

  8. python tips;matplotlib 显示中文

    import numpy as npimport matplotlib.pyplot as pltimport matplotlib as mpl mpl.rcParams['axes.unicode ...

  9. Vue.js之父子组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 二十六个月Android学习工作总结【转】

    原文:二十六个月Android学习工作总结 1.客户端的功能逻辑不难,UI界面也不难,但写UI花的时间是写功能逻辑的两倍.     2.写代码前的思考过程非常重要,即使在简单的功能,也需要在本子上把该 ...