Question

我正在尝试水平对齐这些列表项，但我无法找到解决方法。在项目上使用display: block;并不起作用。

＆＃13;

<div class="thumnail-image fix">
    <ul>
        <li class="active"><a data-toggle="tab" href="#image0"><img alt="" src="mygadgeto/sites/default/files/Polyes-01.jpeg"></a></li>
        <li><a data-toggle="tab" href="#image1"><img alt="" src="mygadgeto/sites/default/files/Polyes-02.jpeg"></a></li>
        <li><a data-toggle="tab" href="#image2"><img alt="" src="mygadgeto/sites/default/files/Polyes-03.jpeg"></a></li>
    </ul>
</div>

＆＃13;

Answer 1

使用flex-box

ul{
  display: flex;
  flex-direction: row; // optional
}

li{
 flex: 1;
}

Answer 2

试试这个

ul li {display:inline;}

Answer 3

这应该可以正常工作 ul li {display：inline-block;}

Answer 4

我总是遇到这个问题，需要一段时间搞乱它，因为我总是忘记什么有效，也许这是正确的：

li {

  display:inline;
  float:left;

}

Answer 5

转到CSS并输入：

li {
  display: inline;
  }

完美无缺：https://jsfiddle.net/84ng7v5x/2/

带图像的HTML列表 - 水平对齐

5 个答案: