Логотип содержит ссылки на A Abit

99
12

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

FIDDLE

<style>
#navigation {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;
background: #000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #000000;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
#main_logo {
float: left;
}
</style>

<!DOCTYPE html>
<html lang="en-US">

<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>

<div id="navigation">
HAD THE IMG SRC TAG HERE
<text id="links">
<a href="index.php">Home</a>
<a href="about.php">About</a>
<a href="social.php">Social</a>

<li style='display: inline-block;'><a href="#">Community</a>
<ul>
<li><a href="/forums">Forums</a>
</li>
<li><a href="/news">News </a>
</li>
</ul>
</li>
<li style='display: inline-block;'><a href="#">More</a>
<ul>

<li><a href="donate.php">Donate</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</li>
</text>
</div>

Что еще я могу сделать, чтобы остановить его перемещение, я хочу, чтобы он остался в центре.

Благодарю!

спросил(а) 2021-01-25T16:37:20+03:00 4 месяца, 2 недели назад
1
Решение
88

Попробуйте использовать этот CSS и примените его к изображению.

.image {
left: 0%;
position: absolute;
width: 8%;
}

вам нужно position: absolute; и left: 0%; если вы не хотите, чтобы ссылки перемещались вообще

http://jsfiddle.net/EZx99/15/

Надеюсь это поможет.

ответил(а) 2021-01-25T16:37:20+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема