как удалить это черное пространство/окно в конце моего меню

-1

Я делаю простой сайт электронной книги, чтобы я и мои друзья могли получить доступ к моим книгам и всему этому джазу. В моем меню есть этот черный ящик или космос на конце, и я не уверен, почему. Я попробовал изменить размер всего меню, и я не знаю, как я могу заставить окно действовать, как кнопка дома. Это прекрасно, поблизости нет места. Просто в конце. html и css для справки.как удалить это черное пространство/окно в конце моего меню

<body> 
<img src="logo2.png" class="logo" /> 
<div class="br" /> 
<ul class="menu"> 
<li class="list"><a href="#">Home</a></li> 
<li><a href="#">Ebooks</a> 
<ul class="dropdown1"> 
     <li><a href="#">Case studies, theses, academia, educational</a></li> 
    </ul> 
</li> 
<li><a href="#">Extras</a> 
    <ul class="dropdown2"> 
     <li><a href="#">test</a></li> 
    </ul> 
</li> 
<li><a href="#">News</a></li> 
<li><a href="#">Site map</a></li> 
</ul> 
<div class="content"> 
<br> 
<p>test</p> 
<br> 
</div> 
</body> 
</html>

И CSS:

body{ 
background-color:#0e0d0d; 
} 

@font-face { 
font-family: Lato-Light; 
src: url('Lato-Light.ttf'); 
} 

@font-face { 
font-family: Lato-Light-Italic; 
src: url('Lato-LightItalic.ttf'); 
} 

img.logo { 
width: 500px; 
height: auto; 
display: block; 
margin-left: auto; 
margin-top:60px; 
margin-right: auto 
} 

div.br { 
margin-top:60px; 
} 

ul{ 
padding:0px; 
font-family:Lato-Light; 
background: #000000; 
color:#f9a724; 
width:535px; 
margin-left:auto; 
margin-right:auto; 
} 

ul li{ 
padding:0px; 
margin:0px; 
display: inline-block; 
position: relative; 
line-height: 21px; 
text-align: center; 
} 

ul li a{ 
display: block; 
padding: 8px 25px; 
color: #f9a724; 
text-decoration: none; 
} 

ul li a:hover{ 
color: #000000; 
background: #f9a724; 
} 

ul li ul.dropdown1 { 
min-width: 150px; /* Set width of the dropdown */ 
max-width:350px; 
background: #000000; 
display: none; 
position: absolute; 
z-index: 999; 
} 

ul li ul.dropdown2 { 
min-width: 150px; /* Set width of the dropdown */ 
max-width:200px; 
background: #000000; 
display: none; 
position: absolute; 
z-index: 999; 
} 

ul li:hover ul.dropdown1 { 
display: block; /* Display the dropdown */ 
} 

ul li ul.dropdown1 li { 
display: block; 
} 

ul li:hover ul.dropdown2 { 
display: block; /* Display the dropdown */ 
} 

ul li ul.dropdown2 li { 
display: block; 
} 

div.content { 
width:535px; 
background: #000000; 
margin-left:auto; 
margin-right:auto; 
} 

p { 
color: #f9a724; 
text-align:center; 
word-wrap: break-word; 
margin-right:50px; 
margin-left:50px; 
font-family:Lato-Light; 
}

https://jsfiddle.net/mncvhoz9/

источник

2015-09-01 johan

Я не понимаю, какой черный ящик, все, что я вижу, есть черный фон, чтобы закончить страницу, вы можете выделить поле вы говорите – Tushar

Вот веб-сайт, чтобы проиллюстрировать его. – johan

http://webmup.com/f9682/vid.webm – johan

Если вы не хотите, чтобы беспокоиться о том, как приступить к точным цифрам пикселей, и/или делая каждую деталь таких же ширины, вы должны быть в состоянии добавить следующие объявления, хотя я не уверен, насколько хорошо он поддерживается всеми версиями браузеров (это было некоторое время, так как я смотрел на нее):

ul { 
    display: table; 
} 
li { 
    display: table-cell; 
}

Пример с тех, которые добавлены к коду: https://jsfiddle.net/nfqs0j0u/

источник

2015-09-01 06:49:47

Просто добавьте следующий CSS в файле

ul li a{ 
    display: block; 
    padding: 9px 29.5px; 
    color: #f9a724; 
    text-decoration: none; 
}

источник

2015-09-01 06:23:33 SaviNuclear

Вы действительно хотите помочь парню, который называет себя «himmler» ??? – connexo

это не черный ящик, это фон вашего ул элемент, вы можете просто изменить ширину своей ul, чтобы удалить эту черную область:

ul { 
    width: 488px; 
}

источник

2015-09-01 06:24:21

Вы действительно хотите помочь парню, который называет себя «himmler» ??? – connexo

Спасибо. Вместо этого вместо 501px это исправлено. Но ты был прав. Также connexo, счастлив? Изменено имя. – johan

ul есть край сверху и снизу, из-за этого у него есть черное пространство.

div.br ul.menu{ 
    margin-bottom:0px 
}

Работа Demo

источник

2015-09-01 06:34:05

Если вам не нужно, чтобы уменьшить ширину ул, то вы должны установить ширину ли.

ul li{ width: 103px; }

источник

2015-09-01 06:46:20

Пожалуйста, попробуйте это:

Css код так:

ul{ 
    padding:0px; 
    font-family:Lato-Light; 
    background: #000000; 
    color:#f9a724; 
    width:488px; 
    margin-left:auto; 
    margin-right:auto; 

    }

Demo

источник

2015-09-01 06:54:24

как удалить это черное пространство/окно в конце моего меню

ответ

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