帶圖像的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列表 - 水平對齊

回答

相關問題