1

私のパンくずが住んでいる白い背景のDivバーがあります。

ここにスクリーンショットを見ることができます：

ここに画像の説明を入力してください

テキストを垂直方向に揃えるにはどうすればよいですか？

これが私のCSSです：

/*  Breadcrumb  */
#breadcrumb {
    position: relative;
    background: white;
    padding: 4px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    behavior: url(/scripts/PIE.htc);
    font-size: .9em;
    color: #526472;
}
#breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#breadcrumb li {
    float: left;
    padding-left: 5px;
}
#breadcrumb a {
    padding-right: 10px;
    background: url(../images/div_breadcrumb.gif) no-repeat right center;
    color: #526472;
    margin-right: 5px;
}

そして私のHTML：

<div id="breadcrumb" class="clearfix">
    <ul>
        <li style="white-space: nowrap;"> 
            <a style="white-space: nowrap;" href="">Home</a> 
        </li>
        <li style="white-space: nowrap;"> 
            Visual collaboration solutions 
        </li>
    </ul>
    <div id="shareThis" class="fl_right"> Share: </div>
</div>
4

3 に答える 3

0

コードが不完全なため、わかりにくいですが、マークアップが欠落しているか、パンくずリストをいじっている他のスタイルがあると思います。

以下は、アイテムを横一列に表示するのに問題なく機能します（あなたのスタイル、私のHTML）。

<html>
<head>
    <style>
        #breadcrumb         { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px;  -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
        #breadcrumb ul      { margin: 0; padding: 0; list-style: none;  }
        #breadcrumb li      { float: left; padding-left: 25px;}
        #breadcrumb a       { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
    </style>

</head>
<body>
<div id="breadcrumb" class="clearfix">
         <ul>
             <li>Home Visual collaboration solutions</li>
             <li>La</li>
             <li>Ti</li>
             <li>Da</li>
         </ul>
    </div>
</body>
</html>

ulタグとliタグを適切に使用している場合は、FirebugまたはChrome開発者ツールを使用して、他のスタイルが適用されているかどうかを検出してみてください。

于 2013-01-03T23:13:15.653 に答える
0

試す：

li{display: inline}

あなたも使うことができます

li{display:inline-block}

そうすれば、li要素がブロックプロパティを失うことはありません

次に例を示します。

http://jsfiddle.net/bFe35/1/

于 2013-01-03T23:14:01.947 に答える
0

次のようにIDに追加して、 CSSファイルを編集してみてください。vertical-align:middle;#breadcrumb

#breadcrumb {
    position: relative;
    background: white;
    padding: 4px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    behavior: url(/scripts/PIE.htc);
    font-size: .9em;
    color: #526472;
    vertical-align:middle;
}
于 2013-01-03T23:57:18.760 に答える