css 如何编辑导航栏以使链接1显示为与位于中心的右侧链接2和位于右侧的链接3对齐

ffscu2ro 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(168)

我试过使用flex属性和对齐内容，但是效果不好。我试过下面提到的代码。
我的目标是使一个网站的标志在顶部和导航栏右下方如下所示
how the site looks like as of now

<header class="top-part">
       <div class="logo"> 
        <img class="logo" src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ">
            <li >
              <a class="nav-link" id="home"href="#">link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="cart" href="#">link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
</head>



css :
    @media screen and (min-width:777px){
    .nav-link {
      padding:18px 0;
      min-width:120px;
    }
    .navbar {
      padding: 0
    }
  }

.header{
    position:sticky ;
    top: 0;
}

css

来源：https://stackoverflow.com/questions/74944500/how-can-the-navbar-be-edited-such-that-the-link-1-appears-aligned-to-the-right-s

3条答案

按热度按时间

1qczuiv01#

我建议你做一些研究，练习一些基本的HTML/CSS，这样你就能理解基本知识，知道每件事是怎么做的。
对于这个特定的例子，你应该看看'flexbox'！

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="d-flex flex-column align-items-center">
    <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
    <nav class="w-100 d-flex bg-light">
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 1</a>
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 2</a>
      <a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 3</a>
    </nav>
  </header>

赞(0）回复(0）举报 2022-12-30

zzwlnbp82#

header {
  width: 100%;
  text-align: center;
}
a:first-of-type{
  float: left;
}
a:last-of-type{
  float: right;
}

<header>
  <img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
  <nav>
    <a href="">link 1</a>
    <a href="">link 2</a>
    <a href="">link 3</a>
  </nav>
</header>

赞(0）回复(0）举报 2022-12-30

tyu7yeag3#

下面是一个方法：
将d-flex、flex-row和justify-content-center添加到包含徽标的父div中。
您可以为链接（ul和li的）添加相同的内容到父div
您的链接是左对齐的，因此您可以将"text-center"添加到<ul>元素的类中。
它看起来像这样：

<header class="top-part">
       <div class="logo d-flex flex-row justify-content-center"> 
        <img class="logo" src="images/logo.png" height=100px width="237px"   >
       </div>
       <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse  d-flex flex-row justify-content-center" id="navbarNavDropdown">
          <ul class="navbar-nav text-center">
            <li>
              <a class="nav-link" id="home" href="#">link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="cart" href="#">link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="contact"href="#">link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

还有一个注意事项，我看到你上面的代码是以</head>结尾的。确保你没有把这个代码放在你网站的<head>中，而是放在<body>：）

赞(0）回复(0）举报 2022-12-30

我来回答

css 如何编辑导航栏以使链接1显示为与位于中心的右侧链接2和位于右侧的链接3对齐

3条答案

相关问题

热门标签

最新问答