Question

元素没有像我希望的那样定位自己。我希望图片距离左边20px，为什么徽标div太薄了？：S为什么topuserbar div会被淘汰？似乎没有理由。 alt text

这是CSS和HTML。这不是火箭科学，所以这更令人沮丧，因为它不应该像这样渲染。

#header
{
    border:1px solid red;
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;    
}

#logo
{
    border:1px solid red;
    display:inline;
    margin-left:35px;
}

#topuserbar
{
    border:1px solid red;    
    font-family:Georgia;
    font-size:large;    
    float:right;
    margin-right:50px;
}

#topuserbar ul
{
}

#topuserbar li
{
    display:inline;
    margin-left:10px;
    color:#fff;
}

#topuserbar .helpicon
{
    margin:0;
    padding:0;
    position:relative;
    top:5px;   
    left:3px;
}

#topuserbar a
{
    color:#fff;
}

#topuserbar a:hover
{
    color:Yellow;
}

<body>    
    <div id="header">
        <div id="logo">
            <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        </div>
        <div id="topuserbar">
            <ul>
                <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
                <li><a href="#" class="someClass" title="Ver una lista compeleta de todos tus anuncios.">Mis Anuncios</a></li>
                <li><a href="#" class="someClass" title="Ir a tu perfil para ver tus comentarios, tu ranking y mas!">Perfil</a></li>
                <li><a href="#" class="someClass" title="Tips y consejos de como mejor usar Cumavi.com y protogerte de enganos.">Ayuda</a><img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
                <li><a href="#">Cerrar Sesion</a></li>
            </ul>
        </div>
    </div>
</body>

编辑：到底是什么？ Opera和Firefox以不同的方式呈现内容。我知道有浏览器不一致但是对于这个简单的事情？！亲们可以告诉我是什么导致了这个吗？ alt text

Answer 1

对于第一个问题，这应该解决它：

#logo
{
    border:1px solid red;
    display:inline;
    margin-left:20px;
}

我不确定我是否理解你！

Answer 2

我会给标题指定一个高度，显示：你的logo div内联，也许使logo div浮动：left;

Answer 3

试试这个：

#logo
{
    border:1px solid red;
    display:inline;
    margin-left:20px;
    height: 75px;
    width:140px
}

根据自己的喜好调整高度和宽度......

Answer 4

知道了：

这就是你停止Chrome推送div的方式：

#topuserbar ul
{
    margin:0px;
}

对我来说很好！

告诉我它是否符合您的要求！

CSS布局非常奇怪，并没有将元素放在应有的位置

4 个答案: