使浮动的div保持在溢出的内容之上

Question

我想在一行中列出链接并隐藏任何不适合浏览器宽度的内容。最后，我希望有一个总是在溢出链接之上的div。我怎样才能做到这一点？

这是demo on dablet.com，调整浏览器窗口大小以查看我的意思。

HTML标记：

<div class="bar">
    <a href="">item</a>
    …
    <a href="">item</a>
    <a href="">item</a>

    <div class="more">
        <a href="">more items...</a>
    </div>
</div>

CSS样式：

.bar {
    font-size: 12px;
    height: 16px;
    margin: 0 0 5px;
    overflow:hidden;
}

.bar a:link,
.bar a:visited {
    background-color: #b3d4ae;
    border-radius: 5px;
    color: #003300;
    padding: 0 3px 15px 3px;
}

.more {
    float: right;
}

Answer 1

结果是：(demo on dabblet.com）

我将标记中的锚点列表更改为ul它在Web开发中更具语义和良好实践

HTML标记：

<div class="bar">
    <ul>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link03</a></li>
        …
        <li><a href="#">link20</a></li>
    </ul>

    <div class="more">
        <a href="">more items...</a>
    </div>
</div>

CSS样式：

.bar {
    font-size: 12px;
    height: 16px;
    overflow: hidden;
    position: relative;
    /* .more width + ~15px to prevent half-visible links */
    padding-right: 83px;
}

.bar ul { margin: 0; }

.bar ul li {
    background-color: #b3d4ae;
    border-radius: 5px;
    color: #003300;
    padding: 0 3px;
    float: left;
}

.bar ul li a,
.bar ul li,
.more,
.more a {
    height: 16px;
    line-height: 16px;
    display: inline-block;
}

.bar ul li + li {
    margin-left: 6px;
}

.more {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    padding: 0 5px;
    box-shadow: -5px 0 5px #fff;
    /* fixed width for example */
    width: 70px;
    text-align: center;
}

Answer 2

您是否尝试使用网站右上角的“修改”链接复制Reddit？如果是这种情况，那么下面的CSS应该做你想要的。

.more {
    right: 0;
    top:0;
    position: fixed;
    z-index: 1000;
}

Answer 3

试试这个，

Demo

<强> CSS：

.bar {
font-size: 12px;
height: 16px;
margin: 0 0 5px;
overflow:hidden;
position:relative;
}

.bar a:link, .bar a:visited {
background-color: #b3d4ae;
border-radius: 5px;
color: #003300;
padding: 0 3px 15px 3px;
}

.links{  
}
.more {
float: right; 
margin-left:20px; 
}

加价：

<div class="bar">
<div class="more">
    <a href="">more items...</a>
</div>
<div class="links">
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
</div> 

Answer 4

请尝试使用以下样式 -

.bar {
font-size: 12px;
height: 16px;
margin: 0 0 5px;
overflow:hidden;
position:relative
}
.bar a:link, .bar a:visited {
background-color: #b3d4ae;
border-radius: 5px;
color: #003300;
padding: 0 3px 15px 3px;
}
.more {
position: absolute;
z-index: 999;
top: 0px;
right: 0;
margin: 10px;
}