时间戳

首页 > 解决方案 > 尽管是 inline-block，但元素表现得像块

html - 尽管是 inline-block，但元素表现得像块

问题描述

在此处输入图像描述

我希望我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>

标签： htmlcssbootstrap-4

解决方案

您priority-menu包含在您设置为 25px 宽度的元素中。尝试删除它并更改为 300 像素，例如您的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;
}

推荐阅读