Question

试图使标题显示在徽标和导航栏链接之间。我正在尝试先没有引导地学习，理想情况下是没有flexbox来学习（想先了解基础知识）。

我一直在尝试在不同位置使用“显示：内联”和不同的“位置”值，但是我迷路了。

    #header-img {
      margin-left: 20px;
      margin-top: 10px;
      height: 100px;
      width: 100px;
      float: left;
    }
    
    #nav-bar {
      text-align: right;
      padding: 20px;
      background-color: #A7A7A9;
    }
    
    li {
      display: inline;
      list-style: none;
    }
    
    ul {
      top: 5px;
      left: 10px;
    }
    
    .nav-link {
      width: auto;
      height: 50px;
      margin-left: 40px;
      margin-top: 25px;
      display: inline-block;
      color: #453F3C;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: .9px;
      text-decoration: none;
    }

    <header id="header">
        <div class="logo">
          <img id="header-img" alt="company logo" src="https://preview.ibb.co/jabJYd/rocket_1976107_1280.png">
        </div>
        
        <h1>Title</h1>
        
        <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#our-services">Our Services</a></li>
            <li><a class="nav-link" href="#reviews">Reviews</a></li>
            <li><a class="nav-link" href="#locations">Locations</a></li>
          </ul>  
        </nav>
        
      </header>

Answer 1

我对开发也很陌生，但是我认为您想要做的是以下事情。

HTML：

   <nav id="nav-bar">
      <ul>
        <div class="new_div"><h1>Title</h1></div>
        <li><a class="nav-link" href="#our-services">Our Services</a></li>
        <li><a class="nav-link" href="#reviews">Reviews</a></li>
        <li><a class="nav-link" href="#locations">Locations</a></li>
      </ul>  
    </nav>

  </header>

CSS：

.new_div{
  float: left;
}

我只是将标题作为新的div添加到了导航菜单中，然后将其向左浮动。如果两者之间有徽标，则可以将其添加到导航列表中，然后将其向左浮动。

Answer 2

您可以使用

header * {
    display: inline;
}

将所有内容<header> </header>内联。

如果您打算在其他地方使用header标记，请使用类或ID。

header.top-bar * {
    display: inline;
}

要使所有背景保持一致：

header.top-bar {
    width: 100%;
    background-color: #A7A7A9;
}

希望对您有帮助！

Answer 3

要了解有关css定位的更多信息，请使用以下链接：https://www.w3schools.com/Css/css_positioning.asp，并了解有关定位的更多信息，请阅读本文：https://www.w3schools.com/Css/css_inline-block.asp 您还需要查看使用百分比作为宽度。

在您的代码中，导航栏和标题是两个父元素，需要对其进行定位并为百分比分配宽度以提高响应能力。像这样；

#nav-bar {
 text-align: right;
 background-color: #A7A7A9;
 width: 79%;
 float: right;
 margin-top: 12px;
 display: inline-block;
 }

标题：

h1{
 display: inline-block;
 width: 18%;
 min-width: 77px;
 float: left;
}

对于导航栏中的ul元素：

ul {
  top: 0px; 
  left: 0px;
  padding-left: 0px;
 }

最后是.navlinks：

.navlink{
 width: auto;
 margin-right: 7%;
 display: inline-block;
 color: #453F3C;
 font-size: 19px;
 font-weight: 500;
 letter-spacing: .9px;
 text-decoration: none;
 }

Answer 4

.header h1{position:absolute; left:50%; transform:translateX(-50%); } 现在，它位于徽标和导航之间。通过设置top属性，您可以垂直移动元素。确保将父元素的位置设置为相对。

在导航栏中排列标题

4 个答案: