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

我试图水平对齐这些列表项，但找不到解决办法。在物品上使用display: block;不起作用。带图像的HTML列表 - 水平对齐

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

来源

2016-08-30 Konstantinos Koletsas

添加'显示：flex'到'ul'。 –

“块级元素以新行开始” - 请参阅[块级与内联]（https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs。 _一致）。 – showdev

-1

我总是有这样的烦恼，需要一段时间与它乱搞，因为我总是忘了什么工作，也许这就是虽然右：

li { 

    display:inline; 
    float:left; 

}

来源

2016-08-30 12:10:13 Joe

你的努力是值得赞赏的，但是，对不起，“也许这是对的”对于这个问题不是一个很好的答案。首先测试你的答案，如果确实有效，那么你可以告诉OP。 –

使用flex-box

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

li{ 
flex: 1; 
}

来源

2016-08-30 12:10:47

试试这个

ul li {display:inline;}

来源

2016-08-30 12:10:57

请编辑更多信息。仅限代码和“尝试这个”的答案是不鼓励的，因为它们不包含可搜索的内容，也不解释为什么有人应该“尝试这个”。我们在这里努力成为知识的资源。 –

-1

转到CSS和类型：

li { 
    display: inline; 
    }

工作完全正常：https://jsfiddle.net/84ng7v5x/2/

来源

2016-08-30 12:11:22 TNEG

这应该正常工作 UL李{显示：内联块;}

来源

2016-08-30 13:12:02 suresh

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

回答

相关问题