我真的对一个我无法解决的问题感到困惑。出于演示目的,我包含了语义 UI 中的垂直菜单组件。正如您在第一张图片中看到的,一切正常,我想要它,但是当我添加 floated='right'
时标记为 <Menu />
, 底部分隔线消失。
它应该是这样的:
这是添加“ float ”标签时发生的情况:
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>
)
}
}
最佳答案
除非您可以为我们重现该问题,或者之前有人遇到过此问题,否则我不确定是否有人能够帮助您。在 HTML 中复制您的菜单并使用 float:right;
似乎没有相同的问题。
编辑:更新代码段以更贴近您的代码笔,并包含对 display: none
的 css 修复,这是您接受的答案。
const {
Menu,
Header
} = semanticUIReact
class App extends React.Component {
state = {}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu vertical style={styles.sidebarMenu} floated='right'>
<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='deals'
active={activeItem === 'deals'}
onClick={this.handleItemClick}
>
<Header as='h4'>Deals</Header>
<p>Check out our collection of deals</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>
)
}
}
const styles = {
sidebarMenu: {
marginLeft: 0,
marginRight: 0,
height: '100vh'
},
}
// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.getElementById('react-app-mount')
ReactDOM.render(<App />, mountNode)
.ui.floated.menu .item:last-child:before {
display: block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
<div id="react-app-mount"></div>
关于html - 在垂直菜单语义 UI React 上添加 float 标签时分隔线消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47894262/