0

一部のテキストがプロパティ vertical-align:super を動的に持つ必要があるメニューを開発しようとしています。「スーパー」テキストを含むこのアイテムが、他のアイテムと垂直方向に整列していないことが発生しています。

ここにCSSコード：

<style>
  #menu{width:300px;height:100px;background:#ABD4E6;}
  #menu ul{list-style:none;}
  #menu li{float:left;background:#054664;padding:20px;}
</style>

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App<span style="vertical-align: super;">*</span></li>
    <li>Contacts</li>
  </ul>
 </div>

どうすれば問題を解決できますか?

よろしくお願いします

4

2 に答える 2

1

の要素はfloat: left、何vertical-alignを設定しても垂直に配置されないように動作します。特定の行の高さを維持するために、すべてのli要素が持つべきではありません。次に、行の高さに対して ,float: leftと一緒に配置できます。可能性の 1 つは、スタイルを次spanのように変更することです。#menu li

#menu li {
    display: inline-block;
    vertical-align: top;
    background:#054664;
    padding:20px;
}

また、HTML マークアップを少し変更することも忘れないでください。次のように、開始タグと終了 liタグの間に空白を入れてはなりません。

  <ul>
    <li>
        Home
    </li><li><!-- HERE: no space -->
        App<span style="vertical-align: super;">*</span>
    </li><li><!-- HERE: no space also -->
        Contacts
     </li>
  </ul>

例を次に示します: http://jsfiddle.net/eLft6/

于 2013-11-13T16:50:19.067 に答える
0

別の問題があります。テキストは垂直方向に整列されましたが、スーパープロパティでスパンを使用するかどうかによって位置が変更されました。

このコードの垂直方向の配置:

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App<span style="vertical-align: super;">*</span></li>
    <li>Test</li>
  </ul>

それとは異なります：

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App</li>
    <li>Test</li>
  </ul>

すべてのliアイテムのスパンを使用して行の高さを変更しようとしましたが、スーパー使用の場合とそうでない場合に別の値を設定しましたが、機能しません!

于 2013-11-15T08:35:50.830 に答える