最终目标是在最左边放置“CodePlayer”,在中间放置.toggles ul(“HTML/CSS/JS/Result”)和“运行”按钮最右边。如何将div放置在导航栏中间?
我的教练总是让我们使用float:left和float:右对齐div内的项目,并且从我在这里学到的所有东西,这是一种可怕的做事方式。所以,我试图去流氓并开始使用display:inline-block,但我无法弄清楚如何在页面中间排列“html/css/js/result”。
如何让每个div分别位于左侧,中间和右侧?
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>
这正是我一直在寻找。非常感谢!你是唯一一个完全按照我想让它出现的方式得到的人。 – mellamojoe