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

Question

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

这是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

结果是： （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

尝试这个，

演示

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 3

您是否尝试使用网站右上角的“编辑”链接复制 Reddit？如果是这种情况，下面的 CSS 应该可以满足您的需求。

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

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;
}