在导航栏中排列标题

Question

正在尝试让标题显示在徽标和导航栏链接之间。我正在尝试在没有 bootstrap 的情况下学习，最好是在没有 flexbox 的情况下学习（想先了解基础知识）。

我一直在尝试 'display: inline' 和不同位置的不同 'position' 值，但我迷路了。

    #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 标签，请使用 class 或 ID。

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

为了让所有人都拥有相同的背景：

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

希望对您有所帮助！

Answer 3

要了解有关 css 定位的更多信息，请使用以下 link：https://www.w3schools.com/Css/css_positioning.asp and to learn more about positioning read this article : https://www.w3schools.com/Css/css_inline-block.asp 您还需要考虑使用百分比作为宽度。

在您的代码中，导航栏和标题是两个 parent 元素，它们需要按百分比进行定位和分配宽度以提高响应速度。像这样；

#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 属性你可以垂直移动元素。确保您的父元素的 position 设置为 relative.

在导航栏中排列标题

Line up Title inside navbar

html

css

title

navbar