在單獨的ul中刪除導航欄中的邊框

-2

我正在尋找擺脫導航欄的「inbetween」邊框。我有很多的ul和李的，它似乎是干擾我的導航欄，即使我分配了類。這裏是一個事先知情同意它應該是什麼樣子：在單獨的ul中刪除導航欄中的邊框

body{ 
 
    background-image: url("../Images/bg.jpg"); 
 
    color: white; 
 
} 
 
h1{ 
 
    font-family: sans-serif; 
 
    font-size: 4em; 
 
    
 
} 
 
h2{ 
 
    height: 56px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
} 
 
.white{ 
 
    color: white 
 
} 
 
.blue{ 
 
    color: #00bfff 
 
} 
 

 
li{ 
 
    display: block; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-width: 1px; 
 
    padding: 4px; 
 
} 
 
ul{ 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-width: 1px; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
    
 
} 
 
.small{ 
 
    width: 270px; 
 
    float: left; 
 
} 
 
.red{ 
 
    background-color: #FF4500; 
 
} 
 
.orange{ 
 
    background-color: #FF8C00; 
 
} 
 
.yellow{ 
 
    background-color: #FFBF00; 
 
} 
 
.brown{ 
 
    background-color: #9C6E03; 
 
} 
 
.black{ 
 
    background-color: #0d1a00 
 
} 
 
img{ 
 
    width: 100%; 
 
    height: 184px; 
 
} 
 
.zoom{ 
 
    width: 370px; 
 
    height: 600px; 
 
    font-size: 20px; 
 
    float: left; 
 
    background-image: url("../Images/bg.jpg"); 
 
    margin-top: -50px; 
 
} 
 
.menuUl{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden 
 
} 
 
.menuLi{ 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: firebrick; 
 
    border-radius: 5px: 
 
}

注：據我所知，在href鏈接還未出現。

JS提琴： https://jsfiddle.net/rsgq3v5e/

來源

2016-12-15 Gerrit ten Napel

不能複製您的問題 – dippas

你確定它是UL？有圍繞它的div嗎？ '.menuUL {border：0px}'將擺脫它。 –

你是什麼意思「中間邊界」？ –

html, body { 
 
    background-color:#222; 
 
} 
 

 
.menuUl { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-top:2px solid #fff; 
 
    border-bottom:2px solid #fff; 
 
} 
 
.menuLi { 
 
    float: left; 
 
    
 
} 
 
li a { 
 
    border-radius:5px; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: firebrick; 
 
}

<ul class="menuUl"> 
 
    <li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a> 
 
    </li> 
 
    <li class="menuLi"><a href="">INFO DAY</a> 
 
    </li> 
 
    <li class="menuLi"><a href="">LOCATIONS</a> 
 
    </li> 
 
</ul>

來源

2016-12-15 22:30:03 Brad

.menuUl { 
list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background: #424242; 
    border-top: 2px solid white; 
    border-bottom: 2px solid white; 

} 
.menuLi { 
    float: left; 
} 
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: #e65e0f; 
    border-radius: 7px; 
}

來源

2016-12-15 22:22:32

html, body { 
 
    background-color:#222; 
 
} 
 

 
.menuUl { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-top: solid 1px #EEE; 
 
    border-bottom: solid 1px #EEE; 
 
} 
 
.menuLi { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border-radius: 10px; 
 
} 
 
li a:hover { 
 
    background-color: firebrick; 
 
} 
 

 
li a.active { 
 
    background-color: firebrick; 
 
}

<ul class="menuUl"> 
 
    <li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a> 
 
    </li> 
 
    <li class="menuLi"><a href="">INFO DAY</a> 
 
    </li> 
 
    <li class="menuLi"><a href="">LOCATIONS</a> 
 
    </li> 
 
</ul>

來源

2016-12-15 22:25:32 oguzhancerit

在單獨的ul中刪除導航欄中的邊框

回答

相關問題