从Div

Question

我正在面对

的样式问题 我实际上想要像

这样的输出

HTML

<ul>
  <li style="border-bottom:1px solid #FFF">HOME</li>
  <li>ABOUT US</li>
  <li>GALLERY</li>
  <li>CONTACT US</li>
</ul>

CSS

ul {
  list-style: none;
  color: #FFFFFF;
  font-size: 24px;
}

ul li {
  /*float:right;*/
}

这是它将生成这样的输出的代码。

如何设置我的代码以获得第一张图片的输出..请帮助我...提前致谢...

Answer 1

您可以在text-align:right;上设置ul。

ul {
  list-style: none;
  color: #fff;
  font-size: 24px;
  background-color: black;
  text-align: right;
}

<ul>
  <li style="border-bottom:1px solid #FFF">HOME</li>
  <li>ABOUT US</li>
  <li>GALLERY</li>
  <li>CONTACT US</li>
</ul>

Answer 2

只是简单地制作了ul align center

ul {
text-align:center;
}