Html CSS显示属性未按预期工作

当试图在我的html中为id创建一个

光标：指针
效果时，格式对齐会发生变化，我不知道为什么。例如，应用时，
id=“mile buff”
跳到下一行

#tracks, #mile-buff{
     display: inline-flex;
     cursor: pointer;
 }

我之所以包含
display:inline flex
，是因为我发现只有这样才能限制指向text/div的指针，而不包含空格。但是，它又一次扰乱了路线。任何帮助都将不胜感激，谢谢。这是我的


#轨道，#英里增益{
显示：内联flex；
光标：指针；
}
.图例主体{
宽度：240px；
盒影：5px10px 18px#8888888；
背景:#f5；
字体大小：14px；
位置：绝对位置；
排名：0；
右：0；
填充：20px；
}
.图层文本{
显示：块；
文本缩进：40px；
}
/*为图例填充图标*/
.分层填充{
宽度：25px；
高度：15px；
保证金：5px；
边框：1px实心rgba（0,0,0,2）；
位置：绝对位置；
显示器：flex；
}
1英里{
背景#76d7c4；
不透明度：.5；
}
半英里{
背景：#f7dc6f；
不透明度：.5；
}
.onehun yrds{
背景：#ec7063；
不透明度：.5；
}
/*图例的线条图标*/
.层线{
边界：0；
宽度：25px；
高度：1px；
利润上限：11px；
左边距：5px；
位置：绝对位置；
显示器：flex；
}
.轨道{
背景色：#000；
}
盐酸{
背景色：#3498db；
高度：2倍；
}
L.车道{
背景色：#3498db；
}
.铺路{
背景色：#138d75；
高度：2倍；
}
.自然的{
/*10px颜色，然后2px透明->对虚线重复此操作*/
背景：重复线性渐变（向右，#138d75 0，#138d75 11px，透明11px，透明14px）
}

铁路层
曲目

声音缓冲区（1英里）

声音缓冲区（1/2英里）

声音缓冲器（100码）

自行车道层
高舒适车道

低舒适车道

多用途踪迹层
铺砌的小径

自然步道

首先，您有多个具有相同ID的元素。元素ID在整个文档中应该是唯一的。

因此，如果没有多个ID
#tracks
和
#mile buff
，以下是HTML：

<div class="legend-body" id= "legend">
  <b>Railroad Layers</b>
  <div class='train-layer-options'>
    <div class="layer-line tracks" id="tracks"></div>
    <a class="layer-text">Tracks<br></a>
    <div class="layer-fill one-mile" id="mile-buff"></div>
    <a class="layer-text">Sound Buffer (1 mile)<br></a>
    <div class="layer-fill half-mile"></div>
    <span class="layer-text">Sound Buffer (1/2 mile)<br></span>
    <div class="layer-fill onehun-yrds"></div>
    <span class="layer-text">Sound Buffer (100 yards)<br></span>
  </div>
  <b>Bike Lane Layers</b>
  <div class='bike-layer-options'>
    <div class="layer-line hclanes"></div>
    <span class="layer-text">High Comfort Lanes<br></span>
    <div class="layer-line lclanes"></div>
    <span class="layer-text">Low Comfort Lanes<br></span>
  </div>
  <b>Multiuse Trail Layers</b>
  <div class='bike-layer-options'>
    <div class="layer-line paved"></div>
    <span class="layer-text">Paved Trails<br></span>
    <div class="layer-line natural"></div>
    <span class="layer-text">Natural Trails<br></span>
  </div>
</div>

最后，您只需在所需的任何ID上添加
光标：指针。

或者在
上。如果您愿意，请选择“分层填充”
课程。
谢谢！是否可以让光标只在文本上，而不在文本右侧的空白处？没问题。对我建议将文本包装在如下span:
轨道
，然后将光标添加到span:
。层文本span{cursor:pointer}
。不要忘记从
.layer text
类中删除
光标：指针。
.layer-text {
  display: block;
  margin-left: 40px;
  cursor: pointer;
}