React+Tailwind CSS：如何让flex容器与logo同行显示

安全阿岳

2026-8-26

解决React+Tailwind中Logo与右侧Flex容器同行布局问题

问题原因

你当前的logo和右侧flex容器被包裹在一个普通块级<div>中，块级元素的子元素默认垂直排列（每个子元素独占一行），所以即使右侧容器用了inline-flex，也无法和logo在同一行显示。

修复方案

给包裹logo和右侧容器的外层div添加flex布局类，让子元素水平排列，同时调整垂直对齐方式：

修改后的核心代码片段

{user?(      
<div className="flex items-center"> {/* 新增flex布局，垂直居中对齐 */}
  {/* 移除mt-8，用flex的items-center控制垂直位置 */}
  <Link to="/main"><img className="ml-4 w-48 bg-yellow-600" src={WorxaImg} alt="logo" /></Link>

  {/* 移除inline-flex，外层已是flex容器，直接用flex即可 */}
  <div className="bg-red-700 flex flex-wrap w-[320px] gap-5 ml-4"> {/* 可添加ml-4设置logo与容器的间距 */}
    <div className="self-start ">
      <input className="bg-green-600 ml-4 w-[10vw] " type="text" placeholder="Search" value={value} onChange={onChange}/>
    </div>
    <div>
      <select className="ml-6 mr-20" type="text" placeholder="Location" name='location' id='location' value={location} onChange={onChangeLocation}>
        <option value="">Select your option</option>
        { locations.map((location,i)=>(
          <option key={i}>{location.city}</option>
        )) }
      </select>
    </div>
    {/* 其余原有内容保持不变 */}
  </div>
</div>
)}