css – 在水平列表中拉伸标签以填充父>

前端之家收集整理的这篇文章主要介绍了css – 在水平列表中拉伸标签以填充父>前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是我的(抽象的)CSS和HTML

#primary-menu{
text-align: center;
margin: 20px 0;
}

#primary-menu li{
list-style-type:none;
display: inline;
margin: 8px;
padding: 5px 30px;
}

#primary-menu ul{
padding: 20px 0px;
}

我已经尝试将#primary-menu设置为{display:block;}并取出display:inline;并加入浮动:左;在#primary-menu li中然后列表向下移动页面并移动到包含div之外,加上它似乎不保持< a>我把浮动:左;在.

我知道的另一个选项是将列表更改为< a href =“one”>< li> one< / li>< / a>但我真的不想这样做,因为(除了它感觉非常hacky)这个列表是由Drupal创建的,我不知道如何做到这一点,而不必学习API是如何工作的,这不是对于这个问题似乎是值得的.

欢迎所有帮助.谢谢.

最佳答案
如果我做对了,那么你只需要从li元素中删除填充并将其添加到a.您还必须更改显示类型:

#primary-menu li{
  list-style-type:none;
  display: inline-block;
  margin: 8px;
}

#primary-menu li a {
   padding: 5px 30px;
   display:block;
}

见:http://jsfiddle.net/v6ZFx/

原文链接:https://www.f2er.com/css/427444.html

猜你在找的CSS相关文章