2015-02-20 2 views
-1

Я не могу удалить первый навигационный разделитель меню (small-black-heart-md.png) из навигации. Все изображения отображаются в нужном месте, кроме первого. Он появляется перед первым элементом списка «Наша история». Я попытался использовать псевдо-элемент nav li: first-child: before {display: none;}, но я не получил никаких результатов. Помощь очень ценится. Эта проблема вызывает у меня недоумение, и я не могу найти четкого ответа в Интернете. Спасибо, что помогли! :)Как удалить первый разделитель навигационного меню

Вот мой CSS:

.banner { 
background-image: url("images/navimages/topimage.jpg"); 
padding: 108px 200px; 
} 

* { 
padding:0; 
margin:0; 
} 

body { 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #C4EDFF; 
    font-family: 'Tangerine', serif; 
    text-align: center; 
} 

p { 
font-family: Arial; 
font-size: 14px; 
text-shadow: 1px 1px 1px #aaa; 
text-align: left; 
} 

nav li { 
text-shadow: 5px 5px 5px #aaa; 
background-image: url(images/navimages/small-black-heart-md.png); 
background-repeat: no-repeat; 
padding-left: 40; 
padding-right: 40; 
font-size: 40px; 
font-weight: bold; 
display: inline; 
} 

li a { 
color: gray; 
text-decoration: none; 
} 

audio { 
width: 640px; 
} 

a:hover { 
color: black; 
} 

Вот мой HTML:

<head> 
<head> 
<title>The Big Day</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
<body> 
<header class="banner"></header> 

<nav> 
<ul> 
<li><a href="ourstory.html">Our Story</a></li> 
<li><a href="photos.html">Photos</a></li> 
<li><a href="details.html">Details</a></li> 
<li><a href= "wishlist.html">Wish List</a></li> 
<li><a href= "index.html">Home</a></li> 
</ul> 
</nav> 

<BR><BR><BR> 

<div style=" 
padding: 60px; 
margin-left: auto; 
margin-right: auto; 
height: 400px; 
width: 620px; 
border: 10px double; 
text-align: left; 
box-shadow: 10px 10px 5px #888888;"> 
<p>Content here...</p></div> 
</body> 
</head> 
</html> 

ответ

0

Просто используйте:

nav li:first-child{ 
    background:none; 
} 
+0

Ну, я чувствую себя глупо. Благодаря! Это сработало. – aaron

+0

если он переместил вашу проблему, можете ли вы принять мои анны :) –

Смежные вопросы