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>是一个块元素，因此默认情况下它希望是100％宽度。如果您使用display: inline;作为内联元素，则会有空间让图标位于导航栏的其余部分旁边。

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

Answer 2

你是说你希望社交媒体图标更高？菜单项旁边是？

尝试使用

display: inline-block;

你的ul。

Answer 3

将ul设为display: inline-block

Answer 4

如前所述，ul是一个块元素，它将占用父元素宽度的100％，因此浮动元素将从下一行开始。

要解决此问题，您可以使用：

ul { 
    margin:0;
    padding:0;
    border: 1px solid blue; /*for demo only */
    display: inline-block;
    width: inherit;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/tAjW8/

您需要设置width: inherit，否则计算出的宽度将比您预期的要窄。

在导航栏上定位社交图标

4 个答案: