数据结构
网络
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.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li> <li><a href="https://tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li> <li><a href="https://tutorialspoint.com/python/index.htm" target="_blank">Python</a></li> <li><a href="https://tutorialspoint.com/csharp/index.htm">C#</a></li> <li><a href="https://tutorialspoint.com/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.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://tutorialspoint.com/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.com/machine_learning/index.htm" target="_blank">Machine Learning</a>
<a href="https://tutorialspoint.com/python_data_science/index.htm" target="_blank">Data Science</a>
<a href="https://tutorialspoint.com/csharp/index.htm" target="_blank">C#</a>
</body>
</html>
更新于： 30-10-2023
167 次浏览
广告