Question

基本上我要做的是将Login菜单一直移到右边。就像你看到所有菜单都是左对齐一样，我需要右对齐Login菜单。问题是我不知道从哪里开始。

这是导航菜单从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 ...互联网上有很多好的资源，只需google吧。

如何将登录向右浮动？

1 个答案: