2

有一个类似的帖子：Stretch Horizo​​ntal 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>

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

谢谢

4

3 回答 3

0

您不需要为此使用 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;
}

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

更高级的版本（source）。

于 2012-07-15T01:39:13.430 回答
0

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

于 2012-07-06T21:12:32.513 回答
0

您为什么不尝试使用 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-06T21:22:00.243 回答