2

テキストの量に応じてサイズを変更する動的 div を実行しています。(つまり、メイン div の幅を定義できません)

問題は、私の現在の CSSでは、これがページの最初の読み込み時に起こっていることです:

div テキストがカットされます

ただし、 を押すF5と、ページのサイズが自動的に変更されて次のように戻ります。

更新後に div テキストが切り取られない

なぜこうなった？どうすれば解決できますか？私はこの部分に困惑しておりcalc、などの高度な CSS 関数も試しました。

jsFiddle で問題を再現することはできませんが、使用しているコードを提供しました。

HTML

<div class="breadcrumbz">
    <ul id="breadcrumbs" class="uppercase">
        <li><a href="http://localhost/adsg">Home</a></li>
        <span>/</span>
        <li><a href="http://localhost/adsg/blog/" title="View all posts in blog" rel="category tag">blog</a></li>
        <span>/</span>
        <li class="single">On the Go.</li>
    </ul>
</div>

CSS

.breadcrumbz { padding:6px 6px 6px 6px; margin:2% 0 0 4%; position:relative; background-color:#3b3c3e; float:left; }
.breadcrumbz ul { white-space:nowrap; float:left; }
.breadcrumbz ul li { display:inline; }
.breadcrumbz ul li:first-child a { padding:0 4% 0 0; }
.breadcrumbz ul li a { padding:0 4%; }
.breadcrumbz ul li span { padding:0 4%; }
.breadcrumbz ul li:last-child a { padding:0 0 0 4%; }
.breadcrumbz ul li.single { padding:0 0 0 4%; }
4

4 に答える 4

2

それはパーセンテージが原因であり、ブラウザーはコンテンツがレンダリングされる前に幅がどうなるかを知りません。コンテンツの余白のパーセンテージは幅に基づいています。(鶏が先か卵が先かという問題のようなものです。)

また、無効な html があります (<span>の子として許可されていません<ul>)。

単位をパーセンテージから変更すると、この問題は発生しません。

http://jsfiddle.net/sdMTJ/5/のサンプル

補足: 無効なスパンの代わりに、疑似要素を使用して要素間にセパレータを追加できます。

li + li:before {
    content: " / ";
}

http://jsfiddle.net/sdMTJ/9/

于 2013-08-04T10:38:32.007 に答える
2

li の表示スタイルを変更する必要があります。「インライン」の代わりに「インラインブロック」を試してください。

.breadcrumbz ul li { display:inline-block; }

このhttp://jsfiddle.net/Yg58f/を確認してください。それが役に立てば幸い。

于 2013-08-04T10:53:54.817 に答える