採取容器高度的動態方法？

我有嵌套在一個父元素內的鏈接元素的代碼，類似這樣的事情：採取容器高度的動態方法？

<div class="container"> 
    <div class="navbar"> 
     <li><a href="#" class="linkitem">Hello</a></li> 
     <li><a href="#" class="linkitem">Hello</a></li> 
     <li><a href="#" class="linkitem">Hello</a></li> 
     <img src="img"> 
    </div> 
</div>

我想讓它這樣的鏈接呈現導航欄的高度，這是由的高度確定圖像和各種邊距/填充屬性。我想這樣做，所以這樣看來，當鏈路正在改變顏色導航欄部分的整個背景當鏈接懸停時，像這樣我可以創造一些CSS，使得它：

.navbar > li > a:hover { 
background-color:red; 
}

但是現在，只有鏈接文本的小背景突出顯示，而不是包含鏈接的導航欄的整個部分。我不想做li:hover，因爲我只想在選擇實際的鏈接文字時讓背景改變顏色。思考？

來源

2013-02-25 user1427661

您是否試過將列表項的高度設置爲100％？ – christopher 2013-02-25 16:41:17

如果你想動態修改基於負載上DOM未知的動態值的CSS，你需要使用javascript，我喜歡jQuery：http://www.jquery4u.com/dynamic-css-2/change-css -jquery / – RandomUs1r 2013-02-25 17:01:30

如果我正確理解你的問題，修復是一件容易的事;簡單地套用display:block;到錨標籤：

.navbar > li > a { 
    display:block; 
}

看看這裏：在MDN http://jsfiddle.net/DrTH9/

文檔

CSS display - https://developer.mozilla.org/en-US/docs/CSS/display

來源

2013-02-25 16:56:23

-1

試試這個：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="container"> 
     <ul class="navbar"> 
      <li><a href="#" class="linkitem">Hello</a></li> 
      <li><a href="#" class="linkitem">Hello</a></li> 
      <li><a href="#" class="linkitem" >Hello</a></li> 
      <li class="imgItem"> 
       <img src="http://placehold.it/50" /> 
      </li> 
     </ul> 
    </div> 
    <style> 
     .container, 
     .navbar, 
     .navbar li, 
     .navbar li a 
     { 
      margin: 0; 
      padding: 0; 
     } 
     .navbar{ 
      display: table; 
     } 
     .navbar li{ 
      display: table-cell; 
      padding: 0 1em; /* you can have horizontal padding on these if you like */ 
      vertical-align: middle; 
     } 
     .navbar li.imgItem{ 
      padding: 0; /* Clear padding from image item */ 
     } 
     .navbar li.hover, 
     .navbar li:hover{ 
      background: red; 
      cursor: pointer; 
     } 
     .navbar img{ 
      margin: -5px 0 0 0; 
      top: 5px; 
      position: relative; 
      /* 
       This fixes a weird bug where the table puts 5px on the bottom of an image that defines a cell's height. 
       NO idea why this is. You may need to mess with this. 
      */ 
     } 
    </style> 
</body> 
</html>

來源

2013-02-25 20:00:02 Arron

採取容器高度的動態方法？

回答

相關問題