在無序列表旁邊留有跨越寬度的寬度？

<div class="nav"> 
    <ul class="nav"> 
     <a class="nav" href="#"> 
      <li class="nav">item1</li> 
     </a> 
     <a class="nav" href="#"> 
      <li class="nav">item2</li> 
     </a> 
     <a class="nav" href="#"> 
      <li class="nav">item3</li> 
     </a> 
    </ul> 
    <div class="line"></div> 
</div>

這是我的HTML導航欄在無序列表旁邊留有跨越寬度的寬度？

CSS：

ul.nav { 
    display: inline-block; 
    font-size: 0; 
} 

li.nav { 
    display:inline-block; 
    border-bottom: 2px solid gray; 
    padding: 15px 20px; 
    text-align: center; 
    font-size: 16px; 
} 
div.nav { 
    width: 100%; 
    display: inline-block; 
}

如何樣式的div.line所以正是在列表旁邊（右），填補了頁面的其餘部分（寬度）並且與ul.nav/div.nav具有相同的高度？

感謝，

來源

2014-02-27 Nekcihc

你能提供一個應該看起來的圖像嗎？ – DonJuwe

我爲你創建了一個小提琴：http://jsfiddle.net/7uZgW/ – DonJuwe

首先，遺憾的英語水平！

你可以這樣做：

.line { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: gray; 
}

e.g：http://jsfiddle.net/X8fE4/

這基本上打開div.line到您的導航背後絕對alement。它將有父div.nav的寬度，這不是一個美麗的解決方案，但是很好的支持:)

來源

2014-02-27 16:09:41 Andressa

如果我使用建議的樣式，我的div.line與整個頁面的高度相同，而不僅僅是div.nav，這是爲什麼？ – Nekcihc

div.line具有與父元素（div.nav）相同的高度。請注意父元素** div.nav **應具有**位置：relative **。 – Andressa

你可以在http://jsfiddle.net/X8fE4/查看詳情 – Andressa

-1

div.nav { 
display: flex; 
display: ms-flex; 
display: -webkit-flex; 
{

編輯：您還需要物業flex-grow添加到.line。

.line { 
    flex-grow: 1; 
}

http://jsfiddle.net/eWHnU/

來源

2014-02-27 14:06:09

這可能幫助你：

預覽：http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/ 代碼：http://jsfiddle.net/webcarvers/7uZgW/3/

JS：

$(document).ready(function(){ 
$("div.two").css({ 
    //-2 is for border width 
    "width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px", 
     "height": ($("div.nav").height()-2) + "px" 
}); 
});

來源

2014-02-27 14:46:36

你會如何改變這段代碼，所以它會自動刷新？（同時調整瀏覽器的大小） – Nekcihc

http://jsfiddle.net/webcarvers/7uZgW/4/ 更新的小提琴 –

它在小提琴中很好用，但是當試圖使用它時，我得到：Uncaught ReferenceError：$未定義我應該如何將其嵌入到html文件中？我需要jQuery嗎？ – Nekcihc

在無序列表旁邊留有跨越寬度的寬度？

回答

相關問題