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

Question

I would like to list links in a single line and hide anything that does not fit within browser width. In the end I would like to have a single div that is always on top of overflowing links. How can I achieve this?

Here's demo on dablet.com , resize the browser window to see what I mean.

HTML markup:

<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 styles:

.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

The result is: (demo on dabblet.com )

I change list of anchors in your markup to ul it is more semantic and good practice in web development

HTML markup:

<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 styles:

.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

Are you trying to copy Reddit with the "Edit" link on the top-right corner of the site? If that's the case, the following CSS that should do what you want.

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

Answer 3

Try this,

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

Markup:

<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

Please try with the following style -

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