如何移除HTML列表项目符号且不破坏原有页面样式

你的样式不生效、布局被破坏，核心是几个代码错误导致的：

• HTML结构非法：<li> 标签仅允许作为 <ul>/<ol>/<menu> 的子元素，你当前直接把<li>嵌套在<h6>标签下，浏览器会自动修正DOM结构，你给<ul>加的list-style: none;根本匹配不到实际渲染的列表元素，还会打乱你写的flex布局。
• 标签语法错误：第一个<a>标签多写了一个多余的</a>闭合标签，会导致元素嵌套关系错乱。
• 浏览器默认样式干扰：原生<ul>自带默认左侧内边距，就算去掉项目符号，不重置这个边距也会出现布局偏移。
• 额外笔误：class属性值里的.是非法字符，多个class需要用空格分隔；.input-box样式里的颜色值写错成gb()，正确写法是rgb()。

不需要改动原有布局逻辑，只需要修正结构、补全列表重置样式即可，原有视觉效果完全保留。

修正后的HTML代码 #

把包裹列表项的<h6>替换为<ul>，复用原有links类名，删掉多余的闭合标签，修正class写法：

<div class="link-container">
  <ul class="links">  
    <li>
      <a href="#" class="linkButton clearbutton" itemprop="possibilities">Sehenswürdigkeiten</a>
    </li>
    <li> 
      <a href="#" class="linkButton clearbutton" itemprop="possibilities">Behörden</a>
    </li>
    <li>
      <a href="#" class="linkButton clearbutton" itemprop="possibilities">Clubs</a>
    </li>
    <li>
      <a href="#" class="linkButton clearbutton">Parks</a>
    </li>
    <li>
      <a href="#" class="linkButton clearbutton" itemprop="possibilities">Stadtkarte</a>
    </li>
  </ul>
</div>

调整后的CSS代码 #

原有样式全部保留，仅给.links类加两行列表重置属性，修正笔误：

.link-container {
  background-color: #4e4e4e91;
  border-color:rgba(129, 191, 235, 0.978);
  border-width: 1px;
  border-style: solid;
  height: 50%;
  border: 2px solid rgba(129, 191, 235, 0.978) ;
  border-radius: 30px;
}

.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 100px;
  margin-right: 100px;
  /* 新增两行代码移除列表符号、清除默认边距 */
  list-style: none;
  padding: 0;
}

a {
  color: rgb(245, 245, 245);
  text-decoration: none;
  font-weight: bold; 
  border: 1px solid ;
  background: 0;
  font-weight: 600;
  border-radius: 40px;
  padding: 0 10px;   
}

a:hover{
  color: rgb(129, 191, 235)
}

.input-box {
  background-color: white;
  color: rgb(129, 191, 235);
}

• 无序列表默认项目符号完全移除
• 原有flex布局、间距、链接交互样式全部保留，不会破坏原有页面设计
• 代码符合HTML规范，不会出现浏览器自动修正DOM导致的随机布局问题

内容的提问来源于stack exchange，提问作者65 sami