Html 在垂直菜单上添加浮动标记时，分隔符消失

我真的被一个我无法理解的问题弄糊涂了。出于演示目的，我从语义UI中包括了一个垂直菜单组件。正如您在第一张图片中所看到的，一切都很正常，我希望如此，但是当我向

添加

浮动的class='right'

标记时，底部的分隔符消失了

应该是这样的：

这是添加“浮动”标记时发生的情况：

import React，{Component}来自“React”
从“语义ui反应”导入{标题，菜单}
导出默认类MenuExampleText扩展组件{
状态={}
handleItemClick=（e，{name}）=>this.setState（{activeItem:name}）
render（）{
const{activeItem}=this.state
返回(
//移除分隔符
促销
查看我们的新促销活动

优惠券
看看我们收集的优惠券

回扣
有关申请退税的信息，请访问我们的退税论坛

)
}
}

除非您能为我们重现这个问题，或者之前有人遇到过这个问题，否则我不确定是否有人能帮助您。在HTML中复制菜单并使用

float:right似乎没有相同的问题

编辑：更新代码片段以更密切地跟踪您的代码笔，并包含了
display:none
的css修复，这是您接受的答案


const{
菜单，
标题
}=语义反应
类应用程序扩展了React.Component{
状态={}
handleItemClick=（e，{name}）=>this.setState（{activeItem:name}）
render（）{
const{activeItem}=this.state
返回(
促销
查看我们的新促销活动

优惠券
看看我们收集的优惠券

交易
查看我们的交易收藏

回扣
有关申请退税的信息，请访问我们的退税论坛

)
}
}
常量样式={
侧边栏菜单：{
marginLeft:0，
marginRight:0，
高度：“100vh”
},
}
// ----------------------------------------
//渲染
// ----------------------------------------
const mountNode=document.getElementById（'react-app-mount'）
ReactDOM.render（，mountNode）
.ui.floated.menu.item:最后一个子项：在{
显示：块！重要；
}

当摆弄css时，有一个真实的示例（在呈现页面时使用浏览器调试器编辑css）是很有帮助的。您是否可以在react之外创建一个最小的HTML/CSS副本？事实上，它在HTML中没有问题。Semantic UI React中一定有一个bug，因为无论我做什么尝试，结果都是一样的。如果你在某个可公开访问的地方托管了一个页面，而该页面存在问题，我或其他人可能可以通过这种方式对其进行调试？是的，我已在CodePen上重新创建了该问题。您可以通过以下链接访问它：。如果从分隔符中删除floated='right'，则会重新出现..我在semantic.min.CSS中发现了有问题的CSS存在
.ui.floated.menu.item:last child:before{display:none；}
，它从最后一个元素中删除分隔符。这就是您要更正的。我不确定在react中修复此问题的最佳方法，但我可能建议附加一个样式表，类似于
.ui.floated.menu.item:last child:before{display:block！important；}
。或者将其添加到您自己的样式表中（如果您已经附加了样式表）。唯一的其他选择是在最后两个元素之间（或在最后一个元素中）添加您自己的div，并像当前分隔符一样手动设置其样式。
import React, { Component } from 'react'
import { Header, Menu } from 'semantic-ui-react'

export default class MenuExampleText extends Component {
   state = {}

   handleItemClick = (e, { name }) => this.setState({ activeItem: name })

   render() {
      const { activeItem } = this.state

      return (
         <Menu vertical> // <Menu vertical floated='right'> removes the divider
            <Menu.Item
               name='promotions'
               active={activeItem === 'promotions'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Promotions</Header>
               <p>Check out our new promotions</p>
            </Menu.Item>

            <Menu.Item
               name='coupons'
               active={activeItem === 'coupons'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Coupons</Header>
               <p>Check out our collection of coupons</p>
            </Menu.Item>

            <Menu.Item
               name='rebates'
               active={activeItem === 'rebates'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Rebates</Header>
               <p>Visit our rebate forum for information on claiming rebates</p>
            </Menu.Item>
         </Menu>
      )
   }
}