元素（UL）流動父母（DIV）

我一直在爲找到這個答案作鬥爭，我不知道我是否只是在搜尋或搜索時遇到問題，但我似乎無法找到解決方案。元素（UL）流動父母（DIV）

基本上我有一個名爲'菜單'（#menu）的DIV，它是一個橫跨瀏覽器屏幕頂部的藍色條，在其中我建立了一個無序列表（創建按鈕）和錨（超鏈接）列表中有填充（爲了文本間隔很好），因此創建一個漂亮的按鈕，但是，當我這樣做時，超鏈接會導致線條流過菜單div，使其看起來很亂，下面是我的代碼，是否有防止這種情況？

HTML：

<div id="menu"> 
<ul> 
<li><a href="#">test</a></li> 
</ul> 
</div>

CSS：

* { font-family: Helvetica; } 
body { margin: 0; background: #fff; } 
#menu { overflow: inline-block; width: 100%; background: #0b9be5; text-align: center; } 
#menu ul { background: #075f8d; poistion: absolute; margin: 0px; list-style-type: none; } 
#menu li { display: inline; } 
#menu a { padding: 1%; border: 1px solid black; font-weight: bold; color: black;  text-decoration: none; } 
#menu a:hover { background-color: #0b9be5; }

預先感謝您！

親切的問候

馬修

來源

2012-09-11 Matthew

檢查拼寫的屬性#menu UL poistion。我會在帖子中糾正你。對我而言，這個網站http://css.maxdesign.com.au/listamatic/ – andres83

我做了一個完全新的代碼爲您服務！

我建議您查看本網站http://css.maxdesign.com.au/listamatic/瞭解更多選項。

的CSS是這樣

.menu-menu-container{ 
    position: absolute; 
} 
ul{ 
    list-style: none; 
} 
li{ 
    border:#996600 1px solid; 
    float: left; 
    margin-left: 14px; 
} 
li a{ 
    color:#000; 
    text-decoration:none; 
    background: #00F; 
    display: block; 
    padding:20px; 
} 
a:hover{ 
    background:#33FFFF; 
}

和HTML可以是這樣的

<div class="menu-menu-container"> 
    <ul id="menu-menu-1" class="menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="http://origenes.co">HOME</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="http://origenes.co/corporativo/">Corporativo</a></li> 
    </ul> 
</div>

來源

2012-09-11 20:35:11 andres83

很有用，display：block使得元素佔用整個頁面寬度，因此使得每個超鏈接佔據一條線。 – Matthew

希望這是有用的。 – andres83

元素（UL）流動父母（DIV）

回答

相關問題