水平导航不内嵌

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> 

这是下面的CSS样式的HTML：

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

希望这有助于

Answer 2

不幸的是我不能正确理解你的问题。我想你可能需要水平对齐这些'标题内容'部分，如果这是你真正想要的，你可以用这段代码来完成它。

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>