Question

我正在尝试开发一个菜单，其中动态一些文本必须具有属性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>

我该如何解决这个问题？

非常感谢提前

Answer 1

float: left元素的行为方式使得它们不会将自己定位为verticaly，无论您将vertical-align设置为它们。所有li元素都不应包含float: left，因此它们会保留一些特定的行高。然后，您可以将它们与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/

Answer 2

我还有另外一个问题。现在文本垂直对齐，但如果我使用带有超级属性的span，则位置会改变。

此代码的垂直对齐方式：

<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>

我尝试使用span修改所有 li 项目的行高，在超级用法的情况下也设置不同的值，但它没有干嘛！

CSS垂直对齐时的文本对齐是超级的

2 个答案: