3

div にブレッドクラム ページが表示されています (高さ 25 ピクセル、幅 700 ピクセル)。最後のいくつかのブレッドクラム ページで、最初のブレッドクラム ページを強制的に非表示にし、Div に最後に収まったページを表示する方法はありますか

これが理にかなっていることを願っています

よろしく

R

4

4 に答える 4

6

overflowはい、使用できfloatますwhite-space。

HTML:

<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa End
    </div>
</div>
<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa End
    </div>
</div>

CSS:

.breadcrumb-container {
    float:left; max-width:100%; margin:5px; overflow-x:hidden; background:orange;
}
.breadcrumb {
    float:right; margin:5px; white-space:nowrap; background:cyan;
}

これにより、リンクが 1 行に収まるようになり、左側からはみ出すテキストが非表示になるため、最後のカテゴリが表示されます。float:leftブレッドクラムが右マージンから始まるのを防ぎます。

于 2011-05-12T11:21:03.253 に答える
2

これは Chrome で動作するようです。ただし、IEの以前のバージョンがそれをどうするかはわかっています。

HTML

<div class="breadcrumb-container">
<ul class="breadcrumb">
    <li>1 breadcrumb item</li>
    <li>2 breadcrumb item</li>
    ...
    <li>10 breadcrumb item</li>
</ul>
</div>

CSS

.breadcrumb-container {
    float: left;
    max-width: 100%;
}

.breadcrumb-container .breadcrumb {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.breadcrumb-container .breadcrumb li {
    display: inline;
}

http://jsfiddle.net/Bu4J5/2/

于 2011-05-12T11:25:34.707 に答える
1

overflow: hiddenデザインが壊れないように、div サイズを超えてコンテンツを非表示にすることができます。

div
{
text-align:right;
width:700px;
height:25px;
overflow-x:hidden;
}

詳細については、 http://www.brunildo.org/test/Overflowxy2.htmlを参照してください。

于 2011-05-12T11:25:40.853 に答える
1

これは私がそれを行う方法の例です

于 2011-05-12T11:24:33.857 に答える