添加浮动标签到 Semantic UI React 垂直菜单后，分隔符消失

Question

添加浮动标签到 Semantic UI React 垂直菜单后，分隔符消失

3

我对一个问题感到困惑，无法理解。为了演示目的，我包含了 Semantic UI 的垂直菜单组件。如第一张图片所示，一切都很正常，也是我想要的，但是当我在 <Menu /> 上添加了 floated='right' 标签后，底部分隔线消失了。

这是预期的方式：

添加 'floated' 标签后的情况如下：

This is what happens when the 'floated' tag is added

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

- merrilj

在调整 CSS 时，拥有一个实时示例很有帮助（可以使用浏览器的调试工具在页面呈现时编辑 CSS）。你能否在 React 之外创建一个最简 HTML/CSS 副本？ - crapier

2个回答

0

对于未来的观众，我能想到的最好解决方案是在您要向右浮动的菜单项内创建一个第二个菜单。这样应该使其显示正常。

- Jake Wright

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- crapier · Accepted Answer

除非您能为我们重现此问题或有人曾经遇到过此问题，否则我不确定是否有人能够帮助您。在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>