html - 如何将div定位在导航栏中间？

Question

最终目标是让“CodePlayer”在最左边，.toggles ul(“HTML/CSS/JS/Result”)在最中间排列，“运行”按钮显示在最右边。

我的老师总是让我们使用 float: left 和 float: right 来对齐 div 内的元素，从我在这里学到的所有知识来看，这是一种糟糕的做事方式。所以，我试图变得无赖并开始使用 display: inline-block，但我不知道如何在页面中间排列“html/css/js/result”。

如何让每个相应的 div 位于左侧、中间和右侧？

http://jsfiddle.net/m2c4j3bu/

CSS:

    body {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
    }


    #menuBar {
        width: 100%;
        height: 2.5em;
        background-color: #E6E6E6; 

    }


    #logo {
        font-weight: bold; 
        font-size: 1em; 
        font-family: helvetica; 
        display: inline-block;
        margin: 10px 0 0 10px; 
        vertical-align: top; 

    }

    #buttonDiv {
        display: inline-block;
    }

    #togglesDiv {
        display: inline-block;
        margin: 0 auto;
    }

    .toggles li {
        list-style: none;
        float: left;
        padding-left: 5px; 
    }

HTML:

    <div id="wrapper">

    <div id="menuBar">

        <div id="logo">CodePlayer</div>

        <ul class="toggles">
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>Result</li>
        </ul>

        <div id="buttonDiv">

            <button id="runButton">Run</button>

        </div>


    </div>

</div>

Answer 1

使用显示:表格

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
            font-weight: 300;
        }


        #menuBar {
            width: 100%;
            height: 2.5em;
            background-color: #E6E6E6; 
            display: table;     
        }

#logo,
#buttonDiv,
.toggles{
    display: table-cell;
    vertical-align: middle;
     width: 25%;
}
        #logo {
            font-weight: bold; 
            font-size: 1em; 
            font-family: helvetica;              
        }

        #buttonDiv {
            text-align: right;
        }
       
.toggles{
    text-align: center;   
   width: 50%;
    background: #ddd;
}
        .toggles li {
         list-style: none;
          display: inline-block;      
           vertical-align: middle;
           padding: 0 5px;
        }

<div id="wrapper">

        <div id="menuBar">

            <div id="logo">CodePlayer</div>
            
            <ul class="toggles">
                <li>HTML
                <li>CSS
                <li>JS
                <li>Result
            </ul>
            
            <div id="buttonDiv">
            
                <button id="runButton">Run</button>
            
            </div>


        </div>

    </div>