如何将菜单置于我的顶栏内？

Question

我正在尝试创建自己的小代码播放器。与jsfiddle网站类似。现在我遇到了CSS问题。

我想将我的菜单栏（按钮HTML，CSS，Javascript，结果）放在顶部栏中。

我刚开始学习HTML，CSS和Javascript。你知道如何解决这个问题吗？

＆＃13;

＆＃13;

#header {
  width: 99%;
  height: 50px;
  background-color: steelblue;
  margin-top: -10px;
  margin-left: -10px;
}

#appname {
  padding: 20px 0px 10px 20px;
  float: left;
  color: white;
  font-size: 20;
  font-style: italic;
}

#run {
  float: right;
  margin: 20px 20px 10px 0px;
}

#menu {
  width: 500px;
  margin: 0 auto;
  padding-top: -1px;
}

#menu ul {
  height: 30px;
}

#menu li {
  list-style: none;
  float: left;
  height: 20px;
  padding: 5px 10px;
  border: 1px solid grey;
  background-color: white;
}

#menu li:hover {
  background-color: darkgrey;
}

.break {
  clear: both;
}

＆＃13;

<div id="header">
  <div id="appname">
    <b>Code Player</b>
  </div>
  <div id="run">
    <button>RUN</button>
  </div>

  <div id="menu">
    <ul>
      <li id="buttonHTML">HTML</li>
      <li id="buttonCSS">CSS</li>
      <li id="buttonJS">Javascript</li>
      <li id="buttonResult">Result</li>
    </ul>

  </div>

</div>

<div class="break"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将此样式用于菜单：

#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
display: flex;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

Answer 2

#menu不需要宽度和边距。然后，您可以使用display: flex; justify-content: center; padding: 0;上的#menu ul来集中它的内容。我还从float删除了#menu li，因为它们已不再需要。

#header {
  width: 99%;
  height: 50px;
  background-color: steelblue;
  margin-top: -10px;
  margin-left: -10px;
}

#appname {
  padding: 20px 0px 10px 20px;
  float: left;
  color: white;
  font-size: 20;
  font-style: italic;
}

#run {
  float: right;
  margin: 20px 20px 10px 0px;
}

#menu {
  padding-top: -1px;
}

#menu ul {
  display: flex;
  justify-content: center;
  padding: 0;
}

#menu li {
  list-style: none;
  height: 20px;
  padding: 5px 10px;
  border: 1px solid grey;
  background-color: white;
}

#menu li:hover {
  background-color: darkgrey;
}

.break {
  clear: both;
}

<div id="header">
  <div id="appname">
    <b>Code Player</b>
  </div>
  <div id="run">
    <button>RUN</button>
  </div>

  <div id="menu">
    <ul>
      <li id="buttonHTML">HTML</li>
      <li id="buttonCSS">CSS</li>
      <li id="buttonJS">Javascript</li>
      <li id="buttonResult">Result</li>
    </ul>

  </div>

</div>

<div class="break"></div>

Answer 3

如果您将text-align: center应用于标题并将包含列表的div更改为display:inline-block，则应该执行此操作。我还删除了填充，边距和宽度：

＆＃13;

＆＃13;

#header {
  width: 99%;
  height: 50px;
  background-color: steelblue;
  margin-top: -10px;
  margin-left: -10px;
  text-align:center;
}

#appname {
  padding: 20px 0px 10px 20px;
  float: left;
  color: white;
  font-size: 20;
  font-style: italic;
}

#run {
  float: right;
  margin: 20px 20px 10px 0px;
}

#menu {
  margin: 0 auto;
  padding-top: -1px;
  display:inline-block;
}

#menu ul {
  height: 30px;
  padding:0;
  margin:0;
}

#menu li {
  list-style: none;
  float: left;
  height: 20px;
  padding: 5px 10px;
  border: 1px solid grey;
  background-color: white;
}

#menu li:hover {
  background-color: darkgrey;
}

.break {
  clear: both;
}

＆＃13;

<div id="header">
  <div id="appname">
    <b>Code Player</b>
  </div>
  <div id="run">
    <button>RUN</button>
  </div>

  <div id="menu">
    <ul>
      <li id="buttonHTML">HTML</li>
      <li id="buttonCSS">CSS</li>
      <li id="buttonJS">Javascript</li>
      <li id="buttonResult">Result</li>
    </ul>

  </div>

</div>

<div class="break"></div>

＆＃13;

＆＃13;

＆＃13;