Jquery 拉伸UL以填充整个DIV

有一个类似的帖子：

但我的有点棘手，因为我尝试了上面的例子，但失败了

CSS:

HTML:

有人能告诉我在哪里我必须编辑来完成代码吗

---

谢谢

尝试将所需宽度设置为

宽度：继承

尝试将所需宽度设置为

width:inherit

为什么不尝试使用em而不是percentage，或者您可以使用类似以下的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';
}

---

但是我没有测试这段代码。

为什么不尝试使用em而不是percentage，或者可以使用如下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';
}

---

但是我没有测试这段代码。

您不需要使用javascript

下面是一个非常简单的示例：

这是没有所有花哨的子菜单

---

还有一点（）。

不需要使用javascript

下面是一个非常简单的示例：

这是没有所有花哨的子菜单

---

---

还有一点（）。

你在哪里失败了，为什么会“棘手”？ul正在填写整个div。是你的列表项及其内容不够广泛。我冒昧地为你格式化代码，因为当代码整洁地呈现时，人们更可能会帮你。删除了一些HTML（为了举例，列出了不需要的项目）。（旁白：太奇怪了，语言暗示仍然不会触发CSS格式设置……不知道我是否遗漏了什么？）下面是一个代码示例。跨信仰，这代表了问题吗？格雷格，你的JSFIDLE链接是我遇到的问题。它不会延伸到整个分区。有什么想法吗？你在哪里失败了，为什么会“棘手”？ul正在填充整个分区。是你的列表项及其内容不够宽。我冒昧地为你格式化代码，因为当代码整洁地呈现时，人们更可能会提供帮助。删除了一些HTML（为了举例，列出了不需要的项目）。（旁白：太奇怪了，语言暗示仍然不会触发CSS格式设置……不知道我是否遗漏了什么？）下面是一个代码示例。跨信仰，这代表了问题吗？格雷格，你的JSFIDLE链接是我遇到的问题。它不适合整个部门。有什么想法吗？除非作为最后的手段，否则我会犹豫使用JavaScript。不过，用CSS填充水平菜单有点棘手。我想说的一件事是，当我没有使用CSS样式时，效果很好，但当我提到doctype时，我用%调整了位置，用emand调整了大小，我想原因是，当你提到盒子的宽度为100%时，我们没有提到宽度id为100%。当我们说body{width:100%；}时，它与客户端窗口大小有关。我认为如果你有一个宽度和高度都是px的div类，比如说100px乘100px，在这种情况下，在这个div中，ul{width=100%；}可以工作，但是保存它的div的宽度被内联样式设置为980px。我假设他希望顶层菜单项在水平导航栏中均匀分布，宽度为980px（或者在响应布局的情况下，无论当时的宽度如何）。主题是“fit width of DIV”而不是“fit width of viewport”。除非是万不得已，否则我会犹豫使用JavaScript。不过，用CSS填充水平菜单有点棘手。我想说的一件事是，当我没有使用CSS样式时，效果很好，但当我提到doctype时，我用%调整了位置，用emand调整了大小，我想原因是，当你提到盒子的宽度为100%时，我们没有提到宽度id为100%。当我们说body{width:100%；}时，它与客户端窗口大小有关。我认为如果你有一个宽度和高度都是px的div类，比如说100px乘100px，在这种情况下，在这个div中，ul{width=100%；}可以工作，但是保存它的div的宽度被内联样式设置为980px。我假设他希望顶层菜单项在水平导航栏中均匀分布，宽度为980px（或者在响应布局的情况下，无论当时的宽度如何）。主题是“适合DIV的宽度”，而不是“适合视口的宽度”。

<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;
}