拉伸UL填滿整個DIV

有一個類似的帖子：Stretch horizontal ul to fit width of div 拉伸UL填滿整個DIV

但是我的是一個有點棘手，因爲我已經嘗試了上面的例子，但失敗了。

CSS：

body{ 
    font-size:0.85em; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 

#nav, #nav ul{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    list-style-position:outside; 
    position:relative; 
    line-height:1.5em; 
    display: table; 
    width: 100%; 
} 

#nav a{ 
    display:block; 
    padding:10px 15px 10px 15px; 
    border:1px solid #fff; 
    color:#fff; 
    text-align: center; 
    margin:0; 
    text-decoration:none; 
    background: #C34328; 
    border-top:1px solid #EF593B; 
    -moz-box-shadow:0px 3px 4px #591E12 inset; 
    -webkit-box-shadow:0px 3px 4px #591E12 inset; 
    -box-shadow:0px 3px 4px #591E12 inset; 
} 

#nav a:hover{ 
    background-color:#fff; 
    color:#333; 
} 

#nav li{ 
    float:left; 
    position:relative; 
} 

#nav ul { 
    position:absolute; 
    display:none; 
    width:12em; 
    top:3.2em; 
} 

#nav li ul a{ 
    width:12em; 
    height:auto; 
    float:left; 
} 

#nav ul ul{ 
    top:auto; 
} 

#nav li ul ul { 
    left:12em; 
    margin:0px 0 0 10px; 
}

HTML：

<div style="width: 980px; border: 1px black solid;"> 
    <ul id="nav"> 
    <li><a href="#">Find a Doctor</a></li> 
    <li><a href="#">Why Interfaith</a></li> 
    <li><a href="#">For Patients & Visitors</a> 
     <ul> 
     <li><a href="#">3.1 jQuery</a></li> 
     <li><a href="#">3.2 Mootools</a></li> 
     <li><a href="#">3.3 Prototype</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Medical Services</a> 
     <ul> 
     <li><a href="#">Behavioral Health</a></li> 
     <li><a href="#">Clinical Laboratory</a></li> 
     <li><a href="#">Dentistry</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

有人能告訴我在哪裏我不得不修改完成的代碼？

感謝

來源

2012-07-06 Interfaith

你哪裏失敗了，爲什麼它'棘手'？ – 2012-07-06 21:11:27

ul正在填滿整個div。這是您的列表項目和他們的內容不夠寬。 – j08691 2012-07-06 21:12:50

我冒昧地爲您設置了代碼格式，因爲人們在代碼整齊呈現時更願意提供幫助。修剪了一些HTML（爲了舉例而列出了不需要的項目）。（另外：奇怪的是，語言提示仍然不會觸發CSS格式...不知道我是否錯過了一些東西？） – 2012-07-06 21:23:07

你爲什麼不與EM嘗試，而不是百分比，或者您可以使用JavaScript這樣的：

document.getElementById('ul').style.width=(document.body.clientWidth-10)*9;

您需要相應地調整爲10和0.9的值。

或者說，是這樣的：

var viewportwidth; 
if (typeof window.innerWidth != 'undefined') 
{ 
viewportwidth = window.innerWidth; 
} 
var boxwidth = parseInt(viewportwidth)*0.57; 
var boxwidth2 = parseInt(boxwidth)+6; 
window.onload=function(){ 

document.getElementById('ul').style.width = boxwidth2 + 'px'; 
}

我沒有，雖然測試此代碼。

來源

2012-07-06 21:22:00 argentum47

除了作爲最後的手段之外，我會毫不猶豫地使用JavaScript。儘管如此，填充水平菜單*對於CSS來說有點棘手。 – 2012-07-06 21:29:04

有一件事我想說，當我沒有使用<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「> css樣式工作正常，但是當我提到doctype事情變得扭曲時，我調整了位置與％和尺寸與EM – argentum47 2012-07-06 21:32:21

，我認爲原因是，當你提到框的寬度爲100％，那麼我們不提及什麼寬度ID 100％。什麼時候說body {width：100％;}然後它是關於客戶端窗口的大小。我認爲如果你有一個div類的寬度和高度的某些像素說100px乘100px，在這種情況下，在該div div {width = 100％;}將工作 – argentum47 2012-07-06 21:38:05

嘗試所需的寬度設置爲width:inherit！

來源

2012-07-06 21:12:32

你不需要爲此使用JavaScript。

這是非常簡單的例子：http://jsfiddle.net/hghzL/

<div style="width: 600px; border: 1px black solid; background: red"> 
    <ul id="nav"> 
    <li><a href="#">Find a Doctor</a></li> 
    <li><a href="#">Why Interfaith</a></li> 
    <li><a href="#">For Patients & Visitors</a></li> 
    <li><a href="#">Medical Services</a></li> 
    </ul> 
</div>

*{ 
    margin: 0; 
    padding: 0; 
} 

html{ 
    background: #111;  
    font-size: 12px; 
    font-family: Verdana, sans-serif; 
} 

#nav{ 
    list-style-type:none; 
    overflow: hidden; 
    background: #222; 
} 

#nav a{ 
    color: #fff; 
    display: block; 
    padding: 10px; 
    text-decoration:none; 
    background: #444; 
} 

#nav a:hover{ 
    background-color:#fff; 
    color:#333; 
} 

#nav li{ 
    float:left; 
}

這是沒有所有的花哨的子菜單。

有點多advanced version（source）。

來源

2012-07-15 01:39:13

拉伸UL填滿整個DIV

回答

相關問題