Tailwind CSS中导航栏Logo与文字无法左对齐求助

问题根源 #

1. 属性名错误：你的<a>标签误用了className（React/Vue等框架专属属性），普通HTML环境下需使用class，导致添加的flex items-start类完全不生效，logo和文字无法按flex布局排列。
2. 容器居中特性：外层的container类默认设置左右margin:auto，会让容器在页面中居中，若你希望logo贴紧页面左侧，需要调整容器边距或替换容器类。

修复后的完整代码 #

<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900 sticky top-0 z-50">
  <!-- 若要让导航内容贴页面左侧，用w-full；若需保持居中容器，保留container即可 -->
  <div class="w-full flex flex-wrap justify-between items-center">
    <!-- 修正className为class，确保flex布局生效 -->
    <a href="https://webforprofessionals.com/" class="flex items-center">
        <img src="https://i0.wp.com/webforprofessionals.com/wp-content/uploads/2020/09/cropped-facebooklogo.jpg?resize=202%2C99&amp;ssl=1" class="mr-3 h-6 sm:h-9" alt="Web For Professionals Logo" />
        <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Web For Professionals</span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
    </div>
  </div>
</nav>

关键调整说明 #

• 修正<a>标签的属性名，让flex布局生效，确保logo与文字水平左排列。
• 替换container为w-full：让导航内容完全贴合页面左侧；若需保留居中的固定宽度容器，继续使用container即可，此时logo会位于容器的左侧位置。
• 移除多余的text-left、items-start类：flex布局默认水平左排列，items-center可让logo与文字垂直居中，更符合导航栏的视觉需求。

内容的提问来源于stack exchange，提问作者Julius Goddard