Question

当我将第一个所有菜单设置为水平时，我很难保持水平的ul导航，但是当点击第二个，第三个或更多个时，它们会变为垂直。我认为这可能是因为div显示块和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

很遗憾，我无法理解你的问题。我想你可能需要水平对齐那些'header-content'部分。如果这是你真正想要的，你可以通过这个代码完成它。

div.section {
  display: inline-block;  
  margin-left: 5em;
}

<div class="section">
  <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>
</div>
<div class="section">
  <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>
</div>

Answer 2

如果我理解得很好，你会尝试将按钮内联并使子菜单工作。有很多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>

希望这有助于

水平导航不是内联的

2 个答案: