2

同様の投稿があります：divの幅に合うように水平ulをストレッチします

しかし、上記の例を試しましたが失敗したので、私のものは少し注意が必要です。

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

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 に答える
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;
}

これには、すべての凝ったサブメニューがありません。

もう少し高度なバージョン（ソース）。

于 2012-07-15T01:39:13.430 に答える