Question

我正在使用w3schools的网站模板创建网站，但导航栏出现问题。页面左侧似乎有空白或填充，这会将导航栏向右推了约50px，我不知道为什么。

这是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

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

Answer 1

这是一个无答案的答案。我将您的代码放在一个代码段中，并包含了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>

为什么我的导航栏不向左对齐？

1 个答案: