Question

我正在为我的应用程序构建一个无序列表。

我喜欢

HTML

<div id='wrapper' class='container'>
      <ul>
          <li id='first-btn'></li>
          <li id='second-btn'><a href='#'>test</a></li>
          <li id='third-btn'><a href='#'>test 3</a></li>
      </ul>        
  </div>

CSS

#wrapper li{
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
}

#first-btn{
    background-color: #5A8D17;
}

#second-btn{
    background-color: #80CD1D;
}

#third-btn{
    background-color: #FFEE00;
}

然而，我的最终结果是如此奇怪。

我的第二个和第三个按钮向下移动。
我也不希望李之间有任何差距所以每个按钮都应该紧挨着彼此而不是看到2px的保证金。

http://jsfiddle.net/Mcq6u/

任何人都可以帮我这个吗？非常感谢

Answer 1

1）您的列表项奇怪地对齐，因为默认情况下它们是垂直对齐的baseline。右边两个项目的文本基线与第一个（底部）的基线垂直对齐。

2）你看到的'2px边距'只是一个空格。由于列表项显示为inline-block，因此它们可识别空白区域。

更改vertical-align并删除/评论空白区域，然后输入：

<强> HTML

<div id='wrapper' class='container'>
    <ul>
        <li id='first-btn'></li><!--
        --><li id='second-btn'><a href='#'>test</a></li><!--
        --><li id='third-btn'><a href='#'>test 3</a></li>
    </ul>        
</div>

<强> CSS

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    vertical-align:top;
}

JSFiddle

Answer 2

你必须改变：

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    float: left;
    }

另外，如果你需要它们之间的空格，请添加相同的类：

margin: 5px;

并根据您的需要调整像素：）

fiddle

Answer 3

只需更改

 display: inline-block;

为：

 float:left;

结果如下：http://jsfiddle.net/Mcq6u/2/

如何在我的情况下对齐ul列表？

3 个答案: