Question

我正在尝试在顶部编写一个带有工具栏的网站，工具栏的HTML是：

＆＃13;

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li{
  display: inline;
}

＆＃13;

<ul>
  <li><a href="/">Home  </a></li>
  <li><p>|</p></li>
  <li><a href="aboutus.html">  About Us  </a></li>
  <li><p>|</p></li>
  <li><a href="contactus.html">  Contact Us</a></li>
</ul>

＆＃13;

你能给予的任何帮助都是非常苛刻的！

Answer 1

您可以使用display: inline-block代替display: inline

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
}

＆＃13;

<ul>
  <li><a href="/">Home  </a></li>
  <li> <p>|</p> </li>
  <li><a href="aboutus.html">  About Us  </a></li>
  <li><p>|</p></li>
  <li><a href="contactus.html">  Contact Us</a></li>
</ul>

＆＃13;

使用Flexbox和:after 伪元素

，这是更好的选择

＆＃13;

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
li:not(:last-child):after {
  content: '|';
  margin: 0 5px;
}

＆＃13;

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="aboutus.html">About Us</a></li>
  <li><a href="contactus.html">Contact Us</a></li>
</ul>

＆＃13;

Answer 2

删除这些：

<li><p>|</p></li>

由于：

段落元素是块（并生成换行符）
划分字符不是段落
分割字符不是列表项

如果您想在列表项之间添加一行，请使用CSS边框。

如何在CSS中使html列表水平？

2 个答案: