css怎麼讓li強制不換行

css強制li不換行的方法：1、使用display屬性，將li元素轉換為內聯元素或行內塊元素，元素前後沒有換行符，也就無法換行了。 2.使用float屬性，為li元素添加「float:left;」樣式，將li元素浮動並排顯示。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

li預設是塊狀元素，總是在新行上開始，佔據一整行。

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

效果圖：

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

方法1：使用display屬性

為li標籤設定「display:inline;」或「display:inline-block;」樣式，將li標籤顯示為內聯元素或行內區塊元素，即可使li標籤不換行。

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

效果圖：

說明：

內嵌元素的特徵：

• 設定寬高無效

• 對margin只設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間

• 不會自動進行換行

行內區塊元素的特徵：

• 不自動換行

• 能夠辨識寬高

• 預設排列方式為從左到右

#（學習影片分享：css影片教學）

方法2：使用float屬性

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

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

效果圖：

說明：

浮動是一種非常有用的佈局方式，它能夠改變頁面中物件的前後流動順序。這樣做的好處是，使得內容的排版變的簡單，具有良好的伸縮性。

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

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

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css怎麼讓li強制不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！