資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 更改預設顯示值
CSS 中的每個元素都有一個預設顯示值，我們可以輕鬆更改。這是透過顯式設定 display 屬性值來實現的。我們首先考慮一個無序列表，並使用 inline 水平設定它。
使用預設顯示設定無序列表
以下設定了一個無序列表。預設顯示，即列表的垂直方式顯示在這裡 -
<ul> <li><a href="https://tutorialspoint.tw/machine_learning/index.htm" target="_blank">Machine Learning</a></li> <li><a href="https://tutorialspoint.tw/python_data_science/index.htm" target="_blank">Python Data Science</a></li> <li><a href="https://tutorialspoint.tw/python/index.htm" target="_blank">Python</a></li> <li><a href="https://tutorialspoint.tw/csharp/index.htm">C#</a></li> <li><a href="https://tutorialspoint.tw/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li> </ul>
更改預設顯示
現在，我們將使用display 屬性和值inline 更改無序列表的預設顯示 -
li {
display: inline;
}
更改 li 元素的預設顯示
示例
現在我們來看一個示例，其中我們將為 <li> 元素設定 inline 顯示屬性值並建立一個水平選單 -
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
li {
display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>The following are the list of resources:</p>
<ul>
<li><a href="https://tutorialspoint.tw/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://tutorialspoint.tw/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://tutorialspoint.tw/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://tutorialspoint.tw/csharp/index.htm">C#</a></li>
<li><a href="https://tutorialspoint.tw/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
更改 a 元素的預設顯示
現在我們來看一個示例，其中我們將為 <a> 元素設定塊顯示屬性值 -
a {
display: block;
}
示例
示例如下 -
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Our Tutorials</h1>
<a href="https://tutorialspoint.tw/machine_learning/index.htm" target="_blank">Machine Learning</a>
<a href="https://tutorialspoint.tw/python_data_science/index.htm" target="_blank">Data Science</a>
<a href="https://tutorialspoint.tw/csharp/index.htm" target="_blank">C#</a>
</body>
</html>
更新於： 30-10-2023
167 次瀏覽
廣告