Werkstoff-ui horizontales Menü

Question

Ich versuche, eine horizontale Menükomponente von Material UI zu erstellen, aber es scheint, dass ich nicht in der Lage bin als alle Listenelemente in einem <div> gewickelten

Die docs eine vertikale Menüliste zeigen

Was funktioniert, wenn ich alle äußeren divs innerhalb der Spannweite entfernen, und entfernen Sie die display: block Stil angewendet auf die Spannweite.

<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

die CSS-Klassenname auf dem Menü Stellen, die Stile seiner unmittelbaren DIV Kinder mit "display: inline-block"

Arbeits jsFiddle: https://jsfiddle.net/d980vcon/2/

in CSS:

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

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