从 Div 右侧开始 <li> 个元素

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

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

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 居中对齐

ul {
text-align:center;
}

Start <li> Elements From right of a Div