Question

我真的很困惑我无法解决的问题。出于演示目的，我在Semantic UI中添加了一个垂直菜单组件。正如您在第一张图片中看到的那样，一切正常以及我想要它，但当我向floated='right'添加<Menu />标记时，底部分隔符会消失。

这是它应该采用的方式：

当这种情况发生时会发生这种情况。标签已添加：

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

Answer 1

除非您能够为我们重现问题或有人遇到此问题，否则我不确定是否有人能够帮助您。在HTML中重现您的菜单并使用float:right;似乎没有相同的问题。

修改：更新后的代码段，以便更密切地关注您的代码，并包含display: none的css修复，这是您接受的答案。

＆＃13;

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)

＆＃13;

.ui.floated.menu .item:last-child:before { 
  display: block !important;
 }

＆＃13;

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

＆＃13;

在垂直菜单上添加浮动标记时，分隔符消失语义UI反应

1 个答案: