2011-06-29 7 views
0

これは本当にシンプルなようですが、次のようなシナリオで正しい構文を取得できません。私はいくつかのドロップダウンメニューを画面の上部に定義しています。私はリスト項目(各LI)がその親LIと同じ幅になるようにしたい。それは分の幅と継承のための簡単な仕事のように思えますが、私はそれが適切に動作するように取得することができませんでした。CSSでmin-widthを継承するにはどうすればよいですか?

「継承」という単語は、認識されないかのようにVSに下線が引かれます。ページはビルド/ロードはうまくいくが、LIコントロールは親LIの幅と同じではないので、引数を読んでいないことは明らかである。どんな助けもありがとうございます。ここで

は私のHTMLの一部です:

<ul id="javascriptDDM"> 
    <li><a href="#"> MAIN OPTION 1 </a> 
     <ul> 
      <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li> 
      <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li> 
      <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li> 
     </ul> 
    </li> 
    <li><a href="../mainPage.aspx"> MAIN OPTION 2 </a> 
     <ul> 
      <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li> 
      <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li> 
      <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li> 
     </ul> 
    </li> 
</ul> 

... EDIT - ここjavascriptDDM CSSのALLです:すべての

#javascriptDDM { width: auto; margin: 0; padding: 0 }  
    #javascriptDDM li { width: auto; float: left; list-style: none } 
    #javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; } 
    #javascriptDDM li a:hover { background: #999999; color: #FFFFFF; } 
     #javascriptDDM li ul { width: auto; margin: 0; padding: 0; position: absolute; visibility: hidden; z-index: 1000 }   
     #javascriptDDM li ul li { min-width: inherit; float: none; display: inline }   
     #javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }   
     #javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF} 
+0

'#javascriptDDM li ul li'の' min-width'とは何ですか? – BoltClock

+0

他の#javascriptDDMコントロールの幅を明示的に定義していないので、単にautoを使用しています。 – WEFX

+0

それで 'a 'が継承するものは何ですか? – BoltClock

答えて

3

継承すると、のプロパティは、親のmin-widthプロパティと同じ「指定された」値になります。親要素にmin-widthを設定しないと、値はありません。

+0

親エレメントは、長さの異なるテキストを含んでいるため、すべてAUTOになります。親をAUTOに設定して120pxの幅をレンダリングすると、子の幅はどのようになりますか?それはAUTOか120pxですか? – WEFX

+0

@WEFX:それは 'auto'です – BoltClock

+0

私の場合、幅がAUTOだったので、親コントロールの幅を設定することは助けにはなりませんでした。私は幅を動的に取得/設定するためにJavaScriptのビットを使用するつもりです。 – WEFX

2

まず、あなたはにあなたのLIの表示モードを設定する必要がありますブロック。この場合、あなたは少なくともそれの幅を制御することができます。

1

WEFX

"ブロックレベル"要素のみが親の幅を継承します。 "a"要素は、本質的に "ブロック"レベルの要素ではありません。

これを解決するには、 "a"要素に "display:block"を追加するか、代わりにaの代わりにliに最小幅のCSSを配置する必要があります。

+0

私はliにmin-widthを追加しました(上の質問の編集を参照)...無駄です。 – WEFX

関連する問題