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

给出一个line-heigth: 20px;（例如..根据您的规格玩不同的高度）。只有这样，垂直对齐才能起作用。

另外：还有什么是&nbsp;高度和宽度属性。您正在使用 css，请在任何地方使用它。

将 a 上的 替换为style="left: 1em;"。将跨度上的 替换为style="padding-right: 1em;"。用等效的 css 替换 height/width 属性。

于 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 回答