html - 如何将登录 float 到右侧？

Question

基本上，我要做的是将登录菜单一直向右移动。正如您看到的所有菜单都左对齐一样，我需要将登录菜单右对齐。问题是我不知道从哪里开始。

这里是从 nav.php 中的数组列表生成导航菜单的地方:

<ul>
 <?php 
      foreach ($navItems as $item) { 
          echo "<li><a href=\"$item[slug]\"><h2>$item[title]</h2></a></li>";                         
      }
 ?>

</ul>

这是它来自 array.php 的数组列表:-

<?php
//Navigation Menu Items

 $navItems =array( 
        array(
            'slug' => "index.php",
            'title' => "Home"
            ),
        array(
            'slug' => "about.php",
            'title' => "About Us"
            ),
        array(
            'slug' => "why.php",
            'title' => "Why Us"
            ),
        array(
            'slug' => "what.php",
            'title' => "What's Included"
            ),
        array(
            'slug' => "faq.php",
            'title' => "FAQs"
            ),
        array(
            'slug' => "contact.php",
            'title' => "Contact Us"
            ),
        array(
            'slug' => "login.php",
            'title' => "Login"
            ),
  );

?>    

但在另一个名为 spacer.php 的文件中，它们包含在内:

   <nav>
        <h2 class="hidden">Our navigation</h2>
          <?php include 'includes/nav.php'; ?>

   </nav>

这是它的 css :-

nav{   
  margin: 0 auto;
  width: 100%;
  font-size: 18px;
  z-index: 300;
  font-weight: bolder;
  font-family: 'Open Sans', sans-serif;
  text-shadow:0px 1px #D6D0C1 ;
}

nav ul
{
    list-style:none;
}

nav ul li
{
    display:block;
    float:left;
    padding:25px 25px;
}

nav ul li a
{
    font-family: 'Open Sans', sans-serif;
    text-transform:uppercase;
    transition: all .25s ease;
}

nav ul li a:hover
{
    color:#A0522D;
}

您可以在此处查看实时示例 http://cleanereview.ca

Answer 1

让它向右浮动...

nav ul li:last-child
{
    float:right;
}

或者把class或者id放在上面，让选择器更简单。

根据进一步的要求:

<li>
    <a href="login.php">
        <h2><img style="width: 16px;" src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Enter-128.png"> <span>Login</span>
        </h2>
    </a>
</li>

这是一千种可能性之一(例如将图像放在背景上，将其定位在绝对位置或相对于其他位置等)

我认为您应该在开始创建网站之前学习一些 html 和 css...互联网上有很多好的资源，只需谷歌即可。