如何在css中設(shè)置li標簽不換行

如何在css中設(shè)置li標簽不換行？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

   li默認是塊狀元素，總是在新行上開始，占據(jù)一整行。

<ul>
	<li>
		<a href="http://kemok4.com/">首頁</a>
	</li>
	<li>
		<a href="http://kemok4.com/">關(guān)于我們</a>
	</li>
	<li>
		<a href="http://kemok4.com/">聯(lián)系我們</a>
	</li>
</ul>

效果圖：

那么如何強制讓li不換行？可以利用display或者float屬性，下面來詳細介紹一下。

方法1：使用display屬性

給li標簽設(shè)置“display:inline;”或“display:inline-block;”樣式，將li標簽顯示為內(nèi)聯(lián)元素或行內(nèi)塊元素，即可使li標簽不換行。

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注釋：加list-style:none去掉li默認產(chǎn)生”點“ */
}

效果圖：

說明：

內(nèi)聯(lián)元素的特征：

• 設(shè)置寬高無效

• 對margin僅設(shè)置左右方向有效，上下無效；padding設(shè)置上下左右都有效，即會撐大空間

• 不會自動進行換行

行內(nèi)塊元素的特征：

• 不自動換行

• 能夠識別寬高

• 默認排列方式為從左到右

（學習視頻分享：css視頻教程）

方法2：使用float屬性

使用float屬性，將li元素浮動并排顯示。浮動是一種使元素脫離文檔流的方法，會使元素向左或向右移動，其周圍的元素也會重新排列。

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注釋：加list-style:none去掉li默認產(chǎn)生”點“ */
}

效果圖：

說明：

浮動是一種非常有用的布局方式，它能夠改變頁面中對象的前后流動順序。這樣做的好處是，使得內(nèi)容的排版變的簡單，具有良好的伸縮性。

浮動是css布局非常強大的布局功能，也是理解CSS布局的關(guān)鍵問題所在，在CSS中，包括div在內(nèi)的任何元素都可以浮動的方式顯示。

浮動可以讓設(shè)置了浮動屬性的元素脫離標準普通流的控制，移動到其父元素中指定位置。

看完上述內(nèi)容，你們掌握如何在css中設(shè)置li標簽不換行的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！