1

リンクを1行にリストし、ブラウザの幅に収まらないものはすべて非表示にします。最後に、オーバーフローするリンクの上に常にある単一の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;
}
4

4 に答える 4

3

結果は次のとおりです： （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;
}
于 2012-06-09T08:11:39.267 に答える
1

サイトの右上隅にある[編集]リンクを使用してRedditをコピーしようとしていますか？その場合は、次のCSSで必要な処理を実行できます。

.more {
    right: 0;
    top:0;
    position: fixed;
    z-index: 1000;
}
于 2012-06-09T08:01:46.520 に答える
1

これを試して、

デモ

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>

于 2012-06-09T08:17:06.647 に答える
0

次のスタイルで試してください-

.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;
}
于 2012-06-09T08:10:04.737 に答える