Question

我正在制作一个投资组合，希望我的名字在navbar的左边，而navbar列表项在右边。我使用了float：right属性，但没有将列表项移到右边。这是我的代码。我正在使用bootstrap btw。

  <nav class = "navbar navbar-expand-md navbar-dark bg-dark">
    <h1> Aiya Siddig</h1>
    <ul class = "navbar-nav">
        <li class = "nav-item">
            <a class = "nav-link" href = "index.html"> About Me </a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link" href = "portfolio.html"> Portfolio </a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link" href = "contact.html"> Contact </a>
        </li>
    </ul>
</nav>

CSS：

 .nav-link, .nav-item  {
        font-size: 18px;
        text-align:right;
        float:right;

    }
    
    h1 {
        color: rgb(236, 236, 236);

    }

Answer 1

您可以使用native中的classes和d-flex之类的justify-content-between引导响应flex nav将链接移到导航栏

要color您的h1，您只需使用类text-white将名称显示为白色color。

实时演示：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
 <h1 class="text-white"> Aiya Siddig</h1>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html"> About Me </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="portfolio.html"> Portfolio </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html"> Contact </a>
    </li>
  </ul>
</nav>

如何将导航栏链接移至导航栏的右侧？

1 个答案: