Question

有一个类似的帖子：Stretch horizontal ul to fit width of 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>

有人可以告诉我在哪里编辑以完成代码吗？

由于

Answer 1

尝试将所需宽度设置为width:inherit！

Answer 2

为什么不尝试用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';
}

我没有测试这段代码。

Answer 3

您不需要使用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）。

拉伸UL以填充整个DIV

3 个答案: