html - 水平导航不是内联的

Question

单击第一个菜单时，我很难将 ul 导航保持水平，所有菜单设置为水平，但是当单击第二个、第三个或更多菜单时，它们会变为垂直。我认为这可能是因为 div 的显示 block 和 div 内容在同一页面上。任何建议肯定会帮助我理解我做错了什么。

<ul class="taby">
  <li>
    <a name="form_a_1" 
       href="#div_&lt;?php echo 1;?&gt;" 
       id="form_a_1" 
       value="1" 
       onclick="return divclick(this,&quot;div_1&quot;);"
    >
      Who
    </a>
  </li>
</ul>
<div id="div_1" 
     class="section2" 
     style="display:block;margin-top:40px;"
>
  CONTENT
</div>
<ul class="taby">
  <li>
    <a name="form_a_2" 
       href="#div_&lt;?php echo 2;?&gt;" 
       id="form_a_2" 
       value="1" 
       onclick="return divclick(this,&quot;div_2&quot;);"
    >
      Contact
    </a>
  </li>
</ul>
<div id="div_2" 
     class="section2" 
     style="display:block;margin-top:40px;"
>
  CONTENT
</div>

这是下面用来设置 html 样式的 css:

.taby{
    margin-left:0;
}
.taby > li > a{
    padding: 8px 12px 9px 12px;
    border-left: medium none transparent;
    border-bottom: medium none transparent;
    background: none repeat scroll 0% 0% transparent;
    border-radius: 0px 0px 0px 0px;
    text-decoration: none;
    font-size: 15px;
    color: #010E6F;
}
ul.taby > li{
    list-style: none;
} 
ul.taby > li {
    float: left;
    line-height: 3em;
}
.taby > li > a:hover {
    background:#428bca;
    color:black;
}
.taby > li + li {
    margin-left: 2px;
}
.taby > li.active > a,
.taby > li.active > a:hover,
.taby > li.active > a:focus {
    color: #fff;
    background-color:gray;
}

Answer 1

如果我理解得很好，您正在尝试使按钮内联并使子菜单正常工作。有很多 css 格式问题，最好避免 html 文件中的内联 css 规则。

请检查更新的示例:

.taby {
  margin-left: 0;
}
.taby > li > a {
  padding: 8px 12px 9px 12px;
  border-left: medium none transparent;
  border-bottom: medium none transparent;
  background: none repeat scroll 0% 0% transparent;
  border-radius: 0px 0px 0px 0px;
  text-decoration: none;
  font-size: 15px;
  color: #010E6F;
}
ul.taby > li {
  list-style: none;
  float: left;
  line-height: 3em;
}
.taby > li > a:hover {
  background: #428bca;
  color: black;
}
.taby > li + li {
  margin-left: 2px;
}
.taby > li.active > a,
.taby > li.active > a:hover,
.taby > li.active > a:focus {
  color: #fff;
  background-color: gray;
}
.taby li div {
  display: none;
  margin-top: 40px;
}
.taby li:hover div {
  display: block;
}

<ul class="taby">
  <li><a name="form_a_1" href="#div_&lt;?php echo 1;?&gt;" id="form_a_1" value="1" onclick="return divclick(this,&quot;div_1&quot;);">Who</a>
    <div id="div_1" class="section2">CONTENT</div>
  </li>
  <li><a name="form_a_2" href="#div_&lt;?php echo 2;?&gt;" id="form_a_2" value="1" onclick="return divclick(this,&quot;div_2&quot;);">Contact</a>
    <div id="div_2" class="section2">CONTENT</div>
  </li>
</ul>

希望对您有所帮助