Question

最终目标是拥有＆＃34; CodePlayer＆＃34;在最左边，.toggles ul（＆＃34; HTML / CSS / JS / Result＆＃34;）排在正中间，＆＃34;运行＆＃34;在最右边说的按钮。

我的导师总是让我们使用float：left和float：right来对齐div中的项目，以及我在这里学到的所有内容，这是一种可怕的做事方式。所以，我试图变得流氓并开始使用display：inline-block，但我无法弄清楚如何获得＆＃34; html / css / js / result＆＃34;排在页面中间。

如何让每个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

使用display: table

＆＃13;

*{
    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;
        }

＆＃13;

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

＆＃13;

Answer 2

不是使用inline-block样式，而是将div ID中的#menuBar元素设置为table-cells，并且它们将在宽度上均匀定位。

<强> Updated Fiddle

以下是主要更新：

#menuBar {
   display:table;
   width: 100%;
   height: 2.5em;
   background-color: #E6E6E6; 
}
#menuBar div {
   display:table-cell; /* Maintains the spacing across the width */
}

Answer 3

好的，所以我改变了一些HTML结构（只是添加了一个包装器div #nav来包装你的切换器）

我在CSS

中进行了以下更改（评论）

#logo {
    font-weight: bold;
    font-size: 1em;
    font-family: helvetica;
    float: left; /* Added */
    padding: 10px 0 0 10px; /* Replaced your margin with padding */
    width: 33.33333333%; /* Added */
}
/* Wrapper for your toggles */
#nav {
    float: left;
    width:33.33333333%;
    text-align: center;
}

#buttonDiv {
    float: left; /* Added */
    width:33.33333333%; /* Added */
    text-align: right; /* Added */
    padding: 10px 10px 0 0px; /* Added */
}

我还为你的切换<li>元素编辑了一些CSS

.toggles li {
    list-style: none;
    padding-left: 5px;
    display: inline-block; /* Added */
}

Fiddle

如何将div放在导航栏中间？

3 个答案: