CSS - 相对于/绝对定位到文本内联元素

Question

我有一个带有下拉选项卡的导航栏菜单。文本是动态填充的。我需要以任何给定的视口大小将插入符号图标定位在文本旁边。这也是我所指的（见绿色插入符号）

下面是代码

* {
  box-sizing: border-box;
}
body {
  margin-top: 70px;
  font-family: Arial;
  font-size: 30px;
}
.nav-wrapper {
  width: 100%;
  background-color: pink;
  height: 150px;
  display: flex;
}
.filler-left {
  // margin-right: auto;
  flex: 2;
  background-color: brown;
}
.filler-right {
  background-color: black;
  width: 600px;
}
.menu-wrapper {
  background-color: lightblue;
  display: flex;
  justify-content: flex-end;
}
.menu-btn {
  text-align:center;
  background-color: orange;
  border: 1px solid red;
  display: flex;
  align-items: center;
}
.text {
  border: 1px solid blue;
}

.caret {
  min-width: 25px;
}

<div class="nav-wrapper">
  <div class="filler-left">
    <img src="https://via.placeholder.com/150"/>
  </div>
  <div class="menu-wrapper">
    <div class="menu-btn">
      <span class="text">lo netrunner</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
     <div class="menu-btn">
       <span class="text">Planes of Salads & Greatness</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
     <div class="menu-btn">
       <span class="text">Formulas & Computations</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
  </div>
  <div class="filler-right">
  </div>
</div>

Codepen 参考，如果这使它更容易调试，但它与上面的代码 sn-p 相同： https://codepen.io/vincentntang/pen/f44a23aa2b2de633e3d2dffa1e83c0b9

文本的宽度不是基于任何填充，而是作为 HTML 文本标准的一部分的第二行第一个单词的长度

我尝试过的事情：

• 我尝试在内联文本上使用position: relative，在插入符号图像上使用position:absolute，但这没有成功
• 我已经尝试使用width: fit-content 对抗text 类元素，但是对于所有视口大小，将“Planes of Salads & Greatness”的文本放在 3 行而不是 2 行。在较大的视口中，我只需要一条线

Answer 1

你可以

• 对.text 应用display: inline-block; 和侧边距，为.caret 创建空间
• 将position: relative; 应用于.menu-btn，使其成为.caret 元素的位置参考，
• 将position: absolute 应用到.caret，添加right 设置以设置到右边框的距离，并添加top: 50% 和transform: translateY(-50%) 以正确定位它

根据需要更改 right、padding 和 - 如果需要）margin 设置...

* {
  box-sizing: border-box;
}
body {
  margin-top: 70px;
  font-family: Arial;
  font-size: 30px;
}
.nav-wrapper {
  width: 100%;
  background-color: pink;
  height: 150px;
  display: flex;
}
.filler-left {
  // margin-right: auto;
  flex: 2;
  background-color: brown;
}
.filler-right {
  background-color: black;
  width: 600px;
}
.menu-wrapper {
  background-color: lightblue;
  display: flex;
  justify-content: flex-end;
}
.menu-btn {
  text-align:center;
  background-color: orange;
  border: 1px solid red;
  display: flex;
  align-items: center;
  position: relative;
  
}
.text {
  border: 1px solid blue;
  display: inline-block;
  padding: 0 1em;
  margin: 0 10px;
}

.caret {
  min-width: 25px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

<div class="nav-wrapper">
  <div class="filler-left">
    <img src="https://via.placeholder.com/150"/>
  </div>
  <div class="menu-wrapper">
    <div class="menu-btn">
      <span class="text">lo netrunner</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
     <div class="menu-btn">
       <span class="text">Planes of Salads & Greatness</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
     <div class="menu-btn">
       <span class="text">Formulas & Computations</span>
      <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
    </div>
  </div>
  <div class="filler-right">
  </div>
</div>

Answer 2

将caret 图像放入其相关的span 元素中，并赋予span 元素与上述父元素相同的弹性属性。

* {
  box-sizing: border-box;
}
body {
  margin-top: 70px;
  font-family: Arial;
  font-size: 30px;
}
.nav-wrapper {
  width: 100%;
  background-color: pink;
  height: 150px;
  display: flex;
}
.filler-left {
  // margin-right: auto;
  flex: 2;
  background-color: brown;
}
.filler-right {
  background-color: black;
  width: 600px;
}
.menu-wrapper {
  background-color: lightblue;
  display: flex;
  justify-content: flex-end;
}
.menu-btn {
  text-align:center;
  background-color: orange;
  border: 1px solid red;
  display: flex;
  align-items: center;
}
.text {
  border: 1px solid blue;
  display: inherit;
  align-items: inherit;
}

.caret {
  min-width: 25px;
}

<div class="nav-wrapper">
  <div class="filler-left">
    <img src="https://via.placeholder.com/150"/>
  </div>
  <div class="menu-wrapper">
    <div class="menu-btn">
      <span class="text">
        lo netrunner
        <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
      </span>
    </div>
     <div class="menu-btn">
       <span class="text">
         Planes of Salads & Greatness
         <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
       </span>
    </div>
     <div class="menu-btn">
       <span class="text">
         Formulas & Computations 
         <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
       </span>
    </div>
  </div>
  <div class="filler-right">
  </div>
</div>

Answer 3

尝试将插入符号放在 span 中。让我知道这是否有效

HTML：

<div class="menu-btn">
      <span class="text">Formulas & Computations</span>
      <span>
           <img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
      </span>
</div>