0

我正在尝试开发一个菜单，其中动态某些文本必须具有属性垂直对齐：超级。发生此项目包含“超级”文本未与其他项目垂直对齐。

这里的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，所以它们会保留一些特定的行高。然后您可以将它们与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>

我尝试使用 span 修改所有li项目的 line-height ，并在是否超级使用的情况下将其设置为不同的值，但它不起作用！

于 2013-11-15T08:35:50.830 回答