Question

如何在HTML中关闭CSS链接？

我在styles.css页面

中有这个

li {
  display: inline;
  padding: 80px;
}

这样做：

<li><a href="home.html">Home</a></li>

水平显示。

但是，当我想在HTML中使用有序列表时，数字将不会出现。我认为因为CSS适用于所有<li>标签。

Answer 1

您可以尝试ul li仅在无序列表中内联项目。

ul li {
  display: inline;
  padding: 80px;
}

或者更好的是，使用一个类来指定应该内联显示的列表：

.inline-list li {
  display: inline;
  padding: 80px;
}

<ul class="inline-list">
  <li><a href="home.html">Home</a></li>
  ...

Answer 2

订购列表包含ol标记，ul标记为无序列表

在您的css中，将ul更改为ol，您就可以获得有序列表

如果您希望显示该号码，则必须添加ol代码。

<ol>
    <li><a href="home.html">Home</a></li>
    <li><a href="home.html">About</a></li>
</ol>

然后，如果你想让它们内联，你可以做

li {
    padding: 80px;
}

ol {
    display: flex;
}

示例：

https://jsfiddle.net/sngzv67o/

Answer 3

您可以通过以下方式完成：

a:link {

text-decoration: none;

}

w3school

Answer 4

至少有两种可能性; 第一个（但我猜你没有找到的那个）是指定风格的路径，如果你能满足你的需要那么

ul > li {
     display: inline;
     padding: 80px;
  }

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ol>
  <li>1</li>
  <li>3</li>
  <li>4</li>
</ol>

这样，内联将仅适用于无序列表项。另一个解决方案是使用vanilla js明确删除样式

ul > li {
     display: inline;
     padding: 80px;
  }

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ol>
  <li>1</li>
  <li>3</li>
  <li>4</li>
</ol>
<input type='button' onclick='document.getElementsByTagName("style")[0].remove()' value='Remove style tag'>

如何通过链接关闭CSS？

4 个答案: