水平導航不內嵌

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>