Question

我有一个相当基本的问题。

我有一个带有7 lis ul的页面，跨越100％的页面。我想让最后三个lis浮动到右边，我希望最后一个是不同的颜色。我试图不要重新编写这个以上的东西。

这是代码，我该如何应用css？制作另一个ul，（但是它会与另一个保持一致）还是直接申请？我可以制作一个特殊的李级别，让最后三个位于不同的地方吗？

<html>
  <head>
    <style>
      ul {
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a {
        width:6em;
        text-decoration:none;
        color:white;
      }

    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a href="#">Link five</a></li>
      <li><a href="#">Link six</a></li>
      <li><a href="#">Link seven</a></li>
    </ul>
  </body>
</html>

Answer 1

您可以使用:nth-child()。 css-tricks.com/how-nth-child-works

li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
    text-align: right;
}

li:nth-child(7) a {
    color: red;
}

例如： http://jsfiddle.net/skeurentjes/3RR8D/

Answer 2

尝试这样的事情

<li><a href="#">Link one</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
  <li><a class="float" href="#">Link five</a></li>
  <li><a class="float" href="#">Link six</a></li>
  <li><a class="float" id="last" href="#">Link seven</a></li>

CSS

.float{
float:right;
}
#last{
color:red;
}

Answer 3

您可以在不添加其他列表的情况下使用此代码。

li:nth-child(4) ~ li {text-align: right;} /* or float? */
li:last-child a {color: green;}

Answer 4

你需要这个

li:nth-child(6)  {
        text-align: right;
      }
      li:nth-child(7) a {
        color: red;
      }

Answer 5

您可以使用此代码：

（无论有多少＆＃34; li＆＃34;将会适用该规则

li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
  text-align: right;
}
li:last-child{
color: red;
}

浮动的一部分ul

5 个答案: