如何调整浮动元素的位置?

用户名

我有一个ul裹着的.box我已经为设置了底部边框.box这些ul项目还具有底部边框,我希望将li边框放置在.box边框上方,以使.box边框不再可见。我试图通过设置来做到这一点,margin-bottom: -1px但不起作用。

请参阅所附图片:

在此处输入图片说明

这是我正在尝试的:

HTML:

<div class="box">
    <ul>
        <li>Hello</li>
         <li>World</li>
    </ul>    
</div>

CSS:

.box{
    border-bottom: 1px solid blue;
    overflow: hidden;   
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li{
    float: left;
    background: green;
    border: 1px solid red;
}

演示: http //jsfiddle.net/b9H2j/

波阿斯

问题

您基本上想让li它的.box父项溢出,但.box设置为overflow:hidden;

一个可能的解决方案是先设置liwith position:relative;,然后使其溢出bottom:-1px;然后overflow:hidden;.box容器中取出并找到另一种方法来解决该明显的错误。

例如:

.box {
    display:table; /* overcome the clear bug */
    width:100%;
    border-bottom: 1px solid blue; 
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    position:relative;
    bottom:-1px;
    float: left;
    background: green;
    border: 1px solid red;
}

参见jsFiddle演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何调整元素的位置

来自分类Dev

如何使粘性元素“浮动”

来自分类Dev

如何调整浮动元素的大小,以使其总宽度始终为父容器的100%?

来自分类Dev

如何控制表格内元素在窗口大小调整时浮动的顺序

来自分类Dev

如何调整浮动元素的大小,以使其总宽度始终为父容器的100%?

来自分类Dev

浮动元素被绝对位置div裁剪

来自分类Dev

如何独立浮动元素?

来自分类Dev

如何居中对齐浮动元素?

来自分类Dev

图片旁边的浮动文本,保持窗口大小调整位置

来自分类Dev

图片旁边的浮动文本,在调整窗口大小时保持位置

来自分类Dev

如何在div元素中获取浮动图像行以使用浏览器窗口调整大小

来自分类Dev

左侧的浮动元素会导致容器意外调整大小

来自分类Dev

如何居中包含左浮动元素的元素?

来自分类Dev

如何更改AngularJS浮动按钮的位置?

来自分类Dev

如何调整侧边栏位置?

来自分类Dev

Matplotlib 如何调整点位置

来自分类Dev

在角度2+中动态调整元素大小时,如何考虑滚动条的位置?

来自分类Dev

调整窗口大小时如何在边框上添加元素并保持其位置?

来自分类Dev

如何防止浏览器高度调整大小影响元素的位置

来自分类Dev

屏幕尺寸更改时,如何调整这些导航栏元素的位置?

来自分类Dev

屏幕大小调整和元素位置调整

来自分类Dev

我如何绝对定位div并将其保持在其原始顶部位置,并在其上方浮动dom元素?

来自分类Dev

我的.float:right元素浮动到包含DIV的位置

来自分类Dev

使用MVVM在AvalonDock中绑定浮动元素的大小和位置

来自分类Dev

如何居中对齐包含浮动元素的div?

来自分类Dev

如何确定浮动元素是否已包装

来自分类Dev

浮动元素如何影响其高度/显示?

来自分类Dev

如何浮动菜单列表元素

来自分类Dev

如何根据浮动元素过滤列表?

Related 相关文章

  1. 1

    如何调整元素的位置

  2. 2

    如何使粘性元素“浮动”

  3. 3

    如何调整浮动元素的大小,以使其总宽度始终为父容器的100%?

  4. 4

    如何控制表格内元素在窗口大小调整时浮动的顺序

  5. 5

    如何调整浮动元素的大小,以使其总宽度始终为父容器的100%?

  6. 6

    浮动元素被绝对位置div裁剪

  7. 7

    如何独立浮动元素?

  8. 8

    如何居中对齐浮动元素?

  9. 9

    图片旁边的浮动文本,保持窗口大小调整位置

  10. 10

    图片旁边的浮动文本,在调整窗口大小时保持位置

  11. 11

    如何在div元素中获取浮动图像行以使用浏览器窗口调整大小

  12. 12

    左侧的浮动元素会导致容器意外调整大小

  13. 13

    如何居中包含左浮动元素的元素?

  14. 14

    如何更改AngularJS浮动按钮的位置?

  15. 15

    如何调整侧边栏位置?

  16. 16

    Matplotlib 如何调整点位置

  17. 17

    在角度2+中动态调整元素大小时,如何考虑滚动条的位置?

  18. 18

    调整窗口大小时如何在边框上添加元素并保持其位置?

  19. 19

    如何防止浏览器高度调整大小影响元素的位置

  20. 20

    屏幕尺寸更改时,如何调整这些导航栏元素的位置?

  21. 21

    屏幕大小调整和元素位置调整

  22. 22

    我如何绝对定位div并将其保持在其原始顶部位置,并在其上方浮动dom元素?

  23. 23

    我的.float:right元素浮动到包含DIV的位置

  24. 24

    使用MVVM在AvalonDock中绑定浮动元素的大小和位置

  25. 25

    如何居中对齐包含浮动元素的div?

  26. 26

    如何确定浮动元素是否已包装

  27. 27

    浮动元素如何影响其高度/显示?

  28. 28

    如何浮动菜单列表元素

  29. 29

    如何根据浮动元素过滤列表?

热门标签

归档