Question

我制作了一个自定义和水平无序列表。这是一个代码示例（没什么特别的）：

<div id="steps-left">
    <ul>
      <li class="active one">Start</li>
    </ul>
</div>

这是定制它的CSS：

#steps-left {
    margin: 0 auto;
    display:inline-block;
    padding-bottom: 40px;
    font-weight: 200;
    font-size: 14px;color:#333333;
}

#steps-left ul {
    margin: auto;
    padding: 0;
    float: left;
}

#steps-left li {
    display: inline;
}

#steps-left ul li.active {
    background: transparent url('../images/steps-left-active.png') no-repeat top left;
    padding: 0px 0px 30px 46px; /* Makes the text move to the right of the bullet */
    line-height: 0px;
    margin-right: 30px; /* Defines the horizontal spacing between the bullets */

}

#steps-left ul li.active.one {
    background-position: 0 0;
    height: 42px;
    width: 43px;
}

问题：

我正在试图找出如何将文本向下移动，因为如下图所示，文本太高了。到目前为止，我还没有找到任何可以改变文本的东西。我知道line-height属性有效，但只有在列表是垂直的情况下才有效，在这种情况下我希望它是水平的。

这是图片：

http://i.stack.imgur.com/ia24l.jpg

Answer 1

您拥有的一个选项是为每个菜单项制作自定义标记对。你试过吗？

按如下方式进行：

<div id="steps-left">
  <ul>
    // And here you would be able to apply line height.
    <li class="active one lineheight">Start</li>
  </ul>
  <ul>
    <li class="blah blah lineheight"> Second item </li>
  </ul>  
</div>

CSS
.lineheight {
 //your desired lineheight.
   example: line-height:100px;
 }

您可以在此处找到有关如何操作的更具体和描述性的文字：Vertical-Align for li tag

定制无序列表文本的定位

1 个答案: