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;
}

尽管是内联块，元素的行为仍与块类似

1 个答案: