时间戳

首页 > 解决方案 > 为什么我的导航栏没有向左对齐？

html - 为什么我的导航栏没有向左对齐？

问题描述

我正在使用 w3schools 的站点模板创建站点，但导航栏出现问题。页面左侧似乎有边距或填充将导航栏向右推约 50 像素，我不知道为什么。

这是html/css。

<!-- Navbar -->
  <div class="w3-top">
    <div class="w3-bar w3-black w3-card">
      <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
      <a href="/" class="w3-bar-item w3-button w3-padding-large">HOME</a>
      <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">BAND</a>
      <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">TOUR</a>
      <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
        <div class="w3-dropdown-hover w3-hide-small">
        <button class="w3-padding-large w3-button" title="Requests">REQUESTS <i class="fa fa-caret-down"></i></button>     
        <div class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="/requests" class="w3-bar-item w3-button">Vote on current Requests</a>
          <a href="/requests/new" class="w3-bar-item w3-button">Submit a new Request</a>
        </div>
      </div>
      <div class="w3-dropdown-hover w3-hide-small">
        <button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>     
        <div class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="#" class="w3-bar-item w3-button">Merchandise</a>
          <a href="#" class="w3-bar-item w3-button">Extras</a>
          <a href="#" class="w3-bar-item w3-button">Media</a>
        </div>
      </div>
      <div class="w3-bar-item w3-button w3-padding-large">
      <% if current_user %>
    <%= link_to 'Log Out', logout_path, {:class => "linkText"} %>
  <% else %>
    <div>

    <%= link_to 'Sign Up', signup_path, {:class => "linkText"} %></a> or 
    <%= link_to 'Log In', login_path, {:class => "linkText"} %>
    </div>
  <% end %>
      </div>

      <a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
    </div>

  </div>

CSS 类可在此处获得：https ://www.w3schools.com/w3css/w3css_references.asp

我正在慢慢开始构建自己的类来替换这些，但我不知道是什么导致了填充出现。

标签： htmlcss

解决方案

这是一个没有答案的答案。我将您的代码放在一个片段中并包含 w3.css，但我没有看到问题。也许这会有所帮助，因为您知道这实际上是您项目中的其他问题。

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<div class="w3-top">
    <div class="w3-bar w3-black w3-card">
      <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
      <a href="/" class="w3-bar-item w3-button w3-padding-large">HOME</a>
      <a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">BAND</a>
      <a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">TOUR</a>
      <a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
        <div class="w3-dropdown-hover w3-hide-small">
        <button class="w3-padding-large w3-button" title="Requests">REQUESTS <i class="fa fa-caret-down"></i></button>     
        <div class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="/requests" class="w3-bar-item w3-button">Vote on current Requests</a>
          <a href="/requests/new" class="w3-bar-item w3-button">Submit a new Request</a>
        </div>
      </div>
      <div class="w3-dropdown-hover w3-hide-small">
        <button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>     
        <div class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="#" class="w3-bar-item w3-button">Merchandise</a>
          <a href="#" class="w3-bar-item w3-button">Extras</a>
          <a href="#" class="w3-bar-item w3-button">Media</a>
        </div>
      </div>
      <div class="w3-bar-item w3-button w3-padding-large">
        Button here...
      </div>

      <a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
    </div>

  </div>

推荐阅读