html - 在导航栏上定位社交图标

Question

这是我的页面当前的样子:Here

我希望社交图标的位置与导航内容的其余部分一致。目前它们在内容之下。我认为向右浮动会解决问题。是因为我的浏览器大小吗？那我该如何解决呢？这是我的代码:

HTML:

<div id="Nav">
<div id="NavContent">
    <ul>
        <li id="Title">PavSidhu.com</li>
        <li>Home</li>
        <li>Web Design</li>
        <li>Graphic Design</li>
        <li>How it Works</li>
        <li>Pay</li>
        <li>Contact</li>
    </ul>

        <img src="Images/Twitter.png" class="Social"/> 
        <img src="Images/Pinterest.png" class="Social"/>
</div>
</div>

CSS:

    #Nav {
    position:fixed;
    width:100%; 
    background-color:#f26522;
}

#NavContent {
    margin:0 auto;
    width:90%;
}

ul {
    margin:0;
    padding:0;  
}

li {
    font-family: Bebas;
    color:#FFF;
    list-style-type:none;
    margin:0;
    padding:0 1%;
    display:inline;
    vertical-align:middle;
    font-size:20px;

}

#Title {
    font-size: 35px;
}

.Social {
    height:35px;
    float:right;
}

谢谢大家:)

Answer 1

<ul>是一个 block 元素，所以它默认为 100% 宽度。如果你用 display: inline; 把它变成内联元素取而代之的是，图标将在导航栏的其余部分旁边留出空间。

ul {
    margin:0;
    padding:0;
    display: inline;
}