<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. 用jQuery实现旋转木马效果(带前后按钮和索引按钮)

    项目中要用到旋转木马效果,一共5张图片轮播,并且点击对应的索引按钮能切换到对应的图片.本效果实在jquery.carousel.js插件的基础上做了一些改进,以实现上述需求. 效果图如下: 代码: H ...

  2. [洛谷P1501][国家集训队]Tree II

    题目大意:给一棵树,有四种操作: $+\;u\;v\;c:$将路径$u->v$区间加$c$ $-\;u_1\;v_1\;u_2\;v_2:$将边$u_1-v_1$切断,改成边$u_2-v_2$, ...

  3. HDU 1007 Quoit Design | 平面分治

    暂鸽 #include<cstdio> #include<algorithm> #include<cstring> #include<cmath> #d ...

  4. 2-sat 学习笔记

    一.问题描述 以你咕的模板题为例 题目描述 有\(n\)个布尔变量\(x_1\)~\(x_n\),另有\(m\)个需要满足的条件,每个条件的形式都是"\(x_i\)为true/false或\ ...

  5. testng自定义注解

    在testng中大部分的注解已经可以满足我们测试的需求,但是在测试的时候想要通过注解的方式加入自己测试一些内容,比如 测试项目 测试描述  验证点等信息,可通过自定义注解的方式实现. 具体操作步骤如下 ...

  6. java算法（一） 直接选择排序

    一.基本概念 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置(注:要把最大最小的元素和起始的元素交换), 然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾.以 ...

  7. 解决crlf 和 lf不同带来的冲突问题

    crlf 和 lf 是文本换行的不同方式: crlf: "\r\n", windows系统的换行方式 lf: "\n", Linux系统的换行方式 他们之间的不 ...

  8. vue jsonp解决跨域处理

    1.安装vue jsonp npm i -S vue-jsonp 2.在main.js中导入vue-jsonp import VueJsonp from 'vue-jsonp' 通过use方法,挂载到 ...

  9. .net 过滤 sql防注入类，省地以后每次都要重新弄！

    /// <summary>    /// 过滤不安全的字符串    /// </summary>    /// <param name="Str"&g ...

  10. nginx 根据POST GET方法跳转

    location ~ /server/ {    proxy_pass_header   Server;    proxy_set_header Host $http_host;    proxy_r ...