Material-ui横向菜单

Question

我正在尝试从 material UI 创建一个水平菜单组件，但我似乎做不到，因为所有列表项都包含在 <div>

docs显示垂直菜单列表

如果我删除跨度内的所有外部 divs，并删除应用于跨度的 display: block 样式，那么有效。

<div style="padding: 8px 0px;">
   <div>
      <span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
         <div>
            <div style="margin-left: 0px; padding: 16px; position: relative;">
               <div>Inbox</div>
            </div>
         </div>
      </span>
   </div>
   <div>
      <span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
         <div>
            <div style="margin-left: 0px; padding: 16px; position: relative;">
               <div>Starred</div>
            </div>
         </div>
      </span>
   </div>
   <div>
      <span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
         <div>
            <div style="margin-left: 0px; padding: 16px; position: relative;">
               <div>Sent mail</div>
            </div>
         </div>
      </span>
   </div>
   <div>
      <span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
         <div>
            <div style="margin-left: 0px; padding: 16px; position: relative;">
               <div>Drafts</div>
            </div>
         </div>
      </span>
   </div>
   <div>
      <span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
         <div>
            <div style="margin-left: 0px; padding: 16px; position: relative;">
               <div>Inbox</div>
            </div>
         </div>
      </span>
   </div>
</div>

Answer 1

在菜单上设置 CSS className，使其直接 DIV 子级具有 "display: inline-block"

工作 jsFiddle：https://jsfiddle.net/d980vcon/2/

在CSS中：

.horiz-menu > div {
  display: inline-block;
}

在 JSX 中：

class Example extends React.Component {
  render() {
    return (
      <Menu className="horiz-menu">
        <MenuItem primaryText="Home"/>
        <MenuItem primaryText="Test Menu 1" />
        <MenuItem primaryText="Test Menu 2" />
        <MenuItem primaryText="About" />
      </Menu>
    );
  }
}

Answer 2

您可以将 flex 用作 css 的一部分，在您的菜单中，您可以使用属性 className="myStyle" 访问它来设置样式，如下所示：

.myStyle {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden'
}

作为您 css.

的一部分

Material-ui横向菜单

Material-ui horizontal menu

reactjs

material-ui