html - 尽管是内联 block ，元素表现得像 block

Question

我希望我的 priority-menu(有 2 个点的菜单)水平显示 3 个点。由于每个单独的点都是 inline-block 我不明白为什么它们会堆叠在一起。通过单击“保存任务”按钮右侧的蓝色圆圈呈现菜单，这会将其显示更改为 inline 而不是 none。我尝试将其更改为 inline-block，但似乎没有任何变化。

/* The popup menu - hidden by default */
#priority-menu {      
    display: none;
    position: absolute;
    top: 150%;    
    border: 3px solid #f1f1f1;
    z-index: 9;    
    max-width: 300px;    
    padding: 10px;
    background-color: white;          
}

#priority-dot-open-menu { 
    position: relative;   
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

#priority-dot-open-menu:hover {
    opacity: 1;
}


#priority-dot-blue {
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

#priority-dot-yellow {
    height: 25px;
    width: 25px;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

#priority-dot-red {
    height: 25px;
    width: 25px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

.modal-footer {
    padding: 0;
}


#priority-menu::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }

<div class="modal-footer d-flex flex-row justify-content-start pl-0 mt-4 border-0">
  <button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save task</button>
  <span id="priority-dot-open-menu">
  <span id="priority-menu">
  <span class="tooltip-top"></span>
  <span id="priority-dot-blue"></span>
  <span id="priority-dot-yellow"></span>
  <span id="priority-dot-red"></span>
  </span>
  </span>
</div>

Answer 1

您的 priority-menu 包含在您设置为 25px 宽度的元素中。尝试删除它并更改为 300px，就像您的 priority-menu 一样。

#priority-dot-open-menu { 
    position: relative;   
    height: 25px
    width: 300px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

您还可以尝试将已声明的 width 添加到您的菜单中，而不仅仅是 max-width。

#priority-menu {
    width:300px;
}