html - 如何将边框底部提供给活动选项卡

Question

我正在创建一个标签，点击它我想给底部一些颜色

最初我创建了一条线（div）并给它一些css，所以它在底部，现在当我点击一个特定的选项卡时，我正在改变我的文本颜色，但我也想给一些底部边框。

为此，我只是使用下面的 css

.active {
  position: absolute;
  margin-top: 1.5rem;
  height: 4px;
  width: 9%;
  background-color: red;
}

但在这里我必须解决导致问题的问题，我希望它占据整个文本宽度。

我的代码

{
  common_data.map((li, index) => ( <
    div key = {
      index
    }
    className = "d-flex menu_group"
    onClick = {
      () => menu_click(index)
    }
    onMouseEnter = {
      () => mouse_enter(index)
    }
    onMouseLeave = {
      mouse_leave
    } >
    <
    i className = {
      index === menu_state ?
      li.icon + '-fill icon_menu_fill' :
        index === idi ?
        li.icon + '-line icon_menu_line onHover' :
        li.icon + '-line icon_menu_line'
    } > < /i> <
    div className = {
      index === menu_state ?
      'name_active' :
        index === idi ?
        'onHover name_not_active' :
        'name_not_active'
    } > {
      li.menu
    } <
    /div> <
    div className = {
      index === menu_state ? 'active d-flex flex-column' : ''
    } > < /div> <
    /div>
  ))
}

代码沙箱链接

我想我错过了一小部分，我正在做的只是一个hack-around，我想以正确的方式去做。

标签： htmlcssreactjstwitter-bootstrap

Answer 1

沙盒

不断添加position: relative;_ .menu_group_width: 100%;.active

如果您想要更宽的下划线，请在选项卡上添加一些填充。