如何在导航栏左侧放置文本且不影响右侧按钮的原有位置

解决方案 #

你用的是Bootstrap框架的导航栏组件，float不生效是因为导航栏是flex布局容器，flex子元素的float属性会失效，用flex布局自带的自动外边距就能实现需求，修改步骤如下：

• 去掉ul标签上的justify-content-end类，不需要全局子元素右对齐
• 把标题代码移到ul内部的最左侧，给标题加上me-auto（Bootstrap5）或mr-auto（Bootstrap4）类，这个类的作用是自动占用右侧所有剩余空间，把后面的按钮直接推到最右侧
• 可以给标题加适配小屏幕的字体大小类，避免360px宽度下标题挤占按钮空间

修改后的完整代码如下：

<div class ="search-bar sticky-top " >
  <ul class="navbar navbar-light bg-light">
    <!-- 移到左侧的标题，me-auto自动占满右侧剩余空间 -->
    <h1 class="navbar-brand me-auto fw-bold fs-5 mb-0">Talk to an Astrologer</h1>
    <!-- 三个按钮代码保持不变，自动对齐到右侧 -->
    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
      <img src="../assets/filter.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
      <img src="../assets/sort.png" width="30" height="30" alt="">
    </a>
  </ul>
</div>

如果要兼容旧版本Bootstrap，也可以直接给标题加行内样式style="margin-right: auto"，效果和me-auto完全一致，不会影响原有按钮的位置和功能。

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