徽标不断敲击链接答案

【问题标题】：Logo Keeps Knocking Links Over A Abit徽标不断敲击链接
【发布时间】：2014-07-13 14:40:28
【问题描述】：

我正在尝试在我的导航中添加一个徽标，但由于某些奇怪的原因，它不断地将链接撞到一边。我什至尝试向左浮动并重新调整图像大小，所以我不确定它为什么这样做

<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>

我还能做些什么来阻止它被移动我希望它保持在中心。

谢谢！

【问题讨论】：

请制作一个 jsfiddle.net
没问题，给我一秒钟
如果你仔细观察，那里并不完美地坐在中心jsfiddle.net/Spudster/ufWda，那是最小的标志：/
我已经根据你的小提琴编辑了我的小提琴，现在应该很完美了。

标签： html css image navigation src

【解决方案1】：

尝试使用此 CSS 并将其应用于图像。

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

如果您根本不希望链接移动，则需要 position: absolute; 和 left: 0%;

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

希望这会有所帮助。

【讨论】：

谢谢 ;) 与没有徽标相比，似乎仍然向右移动了几个像素，但它有点帮助。现在应用 100 像素的图像
编辑小提琴以使文本在中心完美对齐
再次感谢！ ;) 给我 10 分钟，我会测试它
谢谢，效果很好；）我不喜欢问问题，但有时事情确实会变得技术性