Joomla 3.6中<li>内<a>标签不受CSS属性影响的解决咨询

嘿，我来帮你理清这个问题的根源，然后给出简单的解决方案：

为什么你原来的代码没用？ #

• list-style-type:none 是列表元素（<li>/<ul>）的专属属性，<a>标签本身没有列表标记，给它加这个属性完全不起作用。
• <a>标签默认就是inline元素，你设置display:inline等于没做任何改变；而它的父元素<li>默认是block级元素，每个<li>会独占一整行，哪怕<a>是inline，整个列表项还是会换行，自然没法实现水平排列。

正确的解决方案 #

你需要调整<li>的显示方式，同时把列表标记的样式放在正确的元素上：

.myclass ul {
  list-style-type: none; /* 直接给整个列表去掉圆点，比逐个设置<li>更高效 */
  padding-left: 0; /* 移除浏览器给<ul>的默认左内边距，避免列表偏移 */
}

.myclass ul li {
  display: inline-block; /* 让列表项横向排列，inline也可以，但inline-block能更好控制边距 */
  margin-right: 15px; /* 给每个列表项加右边距，避免挤在一起 */
}

/* 如需调整链接样式，单独设置即可 */
.myclass ul li a {
  /* 比如设置颜色、字体大小等，不需要额外设置display:inline，因为默认就是 */
}

效果说明 #

• 把list-style-type:none放在<ul>上，一次性去掉整个列表的圆点，代码更简洁。
• display:inline-block让每个<li>变成行内块元素，既可以横向排列，又能像块元素一样设置内边距、外边距，比纯inline更灵活。
• 加上padding-left:0是为了消除浏览器的默认样式，让列表对齐更整齐。

这样你的链接就会整齐地水平排列啦！

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