2017-10-19 133 views
-1

我有一個簡單的列表設置在一個無序列表中。我想列表元素跨越整個寬度的ul,但我似乎無法弄清楚爲什麼我的方法不起作用。列表元素不包含整個ul

我曾嘗試申請:

nav ul li { 
    margin: 0; 
    padding: 0; 
} 

但是,這改變不了什麼。即使width:100%;li元素也不做任何事情。我如何獲得列表以跨越unordered list的寬度?

.nav-container { 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #f4f3f3; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
nav:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.nav-link { 
 
    display: block; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0px; 
 
    padding-left: 15px; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
} 
 

 
.nav ul { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0px; 
 
} 
 

 
.nav ul li { 
 
    margin-left: 5px; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav ul li a { 
 
    text-align: left; 
 
    padding: 5px; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 15px; 
 
} 
 

 
.nav li:hover a { 
 
    color: #f4f3f3; 
 
} 
 

 

 
/* QUERIES */ 
 

 
@media screen and (max-width: 540px) { 
 
    .nav-container { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #f4f3f3; 
 
    border-bottom: 0.5px solid #f4f3f3; 
 
    } 
 
    .nav-link { 
 
    padding: 10px; 
 
    } 
 
    .logo-holder { 
 
    overflow: hidden; 
 
    display: block; 
 
    margin: auto; 
 
    width: 40%; 
 
    } 
 
    .nav-container nav ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    } 
 
    .logo-holder { 
 
    text-align: left; 
 
    } 
 
    #navigation-div { 
 
    background-color: #f4f3f3; 
 
    margin-top: 0; 
 
    } 
 
    .hide { 
 
    display: none; 
 
    } 
 
    .nav ul li {} 
 
}
<div class="nav-container"> 
 
    <div class="logo-holder"> 
 
    <img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" /> 
 
    </div> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul class="nav-ul"> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

注意:您還可以看到,當你將鼠標懸停在每個鏈接左側的空白處,鏈接變成白色。

編輯: 道歉,忘了提,當我的屏幕大小調整,我的垂直導航欄會轉換成水平導航欄。我已更新我的代碼以顯示此內容。

回答

0

您需要從Li和.nav鏈接刪除左邊距:

.nav-link { 
    display: block; 
    text-align: left; 
    color: #333; 
    text-decoration: none; 
    margin-left: 0px; 
    padding-left: 15px; 
} 

但你:你在.nav鏈接這裏去除餘量

.nav ul li, 
.nav-link { 
    margin-left: 0; 
} 

注稍後再添加它。

.nav-link { 
    text-align: left; 
    padding: 5px; 
    color: #333; 
    text-decoration: none; 
    margin-left: 15px; 
} 

稍尖故障排除造型 - 如果你正在使用Chrome,打開開發者控制檯,選擇您的元素,改變「樣式」選項卡「計算」,你就可以看到具體什麼風格被應用到您正在使用的元素(然後追溯它們以找出應用它們的內容)。這使得它更容易一些,當你有潛在的多個樣式聲明覆蓋彼此相同的元素:)

+0

感謝方便的技巧呢! – Freddy

+0

不用擔心。樂於幫助! – delinear

0

上解決你有一個margin-left: 15px應用於.nav-link,這會導致您的問題,只需將其更改爲填充左和在.nav li ul刪除margin-left,看到這個小提琴: https://jsfiddle.net/f2fc0r1q/

0

代碼中使用一些重複,它只是需要一點點調整。

.nav-container { 
 
    background-color: #f4f3f3; 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
.nav ul { 
 
    box-sizing: border-box; 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
.nav li { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav-link { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    padding: 5px 5px 5px 15px; 
 
    line-height:15px; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
}
<div class="nav-container"> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

0

就這麼簡單,你.nav-link.nav ul limargin-left價值。通過刪除它們或使它們爲0會給你所需的輸出。

.nav-container { 
 
    border-right: 1px solid #E4E2E2; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #f4f3f3; 
 
} 
 

 
.nav { 
 
    text-align: justify; 
 
} 
 

 
.nav-link { 
 
    display: block; 
 
    text-align: left; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0px; 
 
    padding-left: 15px; 
 
} 
 

 
.nav ul { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    padding: 0px; 
 
} 
 

 
.nav ul li { 
 
    width: 100%; 
 
    margin-left: 0; 
 
    list-style-type: none; 
 
    height: 25px; 
 
} 
 

 
.nav-link { 
 
    text-align: left; 
 
    padding: 5px; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin-left: 0; 
 
} 
 

 
.nav-link:hover { 
 
    background-color: #333; 
 
    color: #f4f3f3; 
 
} 
 

 
.nav li:hover a { 
 
    color: #f4f3f3; 
 
}
<div class="nav-container"> 
 
    <div id="navigation-div"> 
 
    <nav class="nav"> 
 
     <ul> 
 
     <li><a class="nav-link active" href="">Test 1</a></li> 
 
     <li><a class="nav-link " href="">Test 2</a></li> 
 
     <li><a class="nav-link" href="">Test 3</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

相關問題