0

私はメニュー構造を持っています:

http://imageshack.us/scaled/thumb/248/image4.gif

一部のメニューにはサブメニューがあります。この場合、小さな赤い矢印が必要です。しかし、ご覧のとおり、最も長いアイテムの新しい行に移動します。中心ではありません。これは私が試したものです：

<a href="/fax">&nbsp;
  <span>flick&nbsp;</span><span style="float: right; vertical-align: middle;"><img src="/design/right.gif" width="4" height="7" /></span>
</a>

(読みやすくするために、実際のコードには改行やスペースはありません)

この場合、矢印は右に移動しますが、中央ではなく上に移動します - 最後のメニュー項目の場合、下に移動します:S

4

4 に答える 4

1

aを与えline-heigth: 20px;ます（例..スペックに応じて異なる高さでプレイします）。そうして初めて、垂直方向の位置合わせが機能します。

さらに&nbsp;、高さと幅の属性はどうなりますか。あなたはcssを使っています、どこでもそれを使ってください。

のをに置き換えstyle="left: 1em;"ます。スパンのを。に置き換えますstyle="padding-right: 1em;"。高さ/幅のプロパティを同等のcssに置き換えます。

于 2012-11-26T11:54:41.383 に答える
1

タグを基準にした位置と画像の絶対位置を追加します。

于 2012-11-26T11:54:42.970 に答える
1

このためには、以下のように float:left を最初のスパンに追加する必要があります。

<a href="/fax">&nbsp;<span style="float:left;">flick&nbsp;</span><span style="float: right; vertical-align: middle;"><img src="D:/wamp/www/xplifeline/application/images/default.jpg" width="4" height="7" /></span></a>
于 2012-11-26T12:05:27.067 に答える
0

私はこれを持っています：

<ul id="nav">
<li>Menu 1
    <ul class="nav first">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4
        <ul class="nav">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    </ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>

ここから：http：//jsfiddle.net/y9jbQ/

今それは見えます：

<span style="float: left; line-heigth: 40px; vertical-align: middle; display: inline-block;">&nbsp;menu&nbsp;</span><span style="float: right; line-heigth: 40px; vertical-align: middle;"><img src="/design/right.gif" width="4" height="7" /></span>

結果：http ：//s12.postimage.org/muw3hehyh/Image4.gif？noCache = 1353932739

于 2012-11-26T12:26:46.033 に答える