Question

这是我的代码：
<li><div class="onleft"></div><a href="<? echo $site;?>top-likes" id="on">Top</a><div class="onright"></div></li>

这是我的css：

.onleft{
        display:block;
        position:relative;
        color:#0d95d4;
        float:left;
        background-image:url(images/logonav_onleft.png);
        background-repeat:no-repeat;
        width:4px;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

    .onright{
        display:block;
        position:relative;
        color:#0d95d4;
        float:right;
        background-image:url(images/logonav_onright.png);
        background-repeat:no-repeat;
        width:4px;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

    #on{
        display:block;
        margin-top:-10px;
        color:#0d95d4;
        float:left;
        background: url(images/logonav_on.png) repeat-x;
        width:100%;
        height:47px;
        font-family: Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 27px;
        font-weight: bold;
        font-variant: normal;
        text-decoration:none;
    }

我的问题是，不是右侧和左侧图像显示在x重复图像上，而是每个图像都显示在一个新行中。我尝试使用display属性来解决它，但它不起作用...
我认为这可能是因为宽度在#on中设置为100％，但我真的不知道该怎么做以解决这个问题。

有什么建议吗？谢谢！

链接：http://ilikeyou.tk/top-likes

Answer 1

要使用float:，您必须删除 position:和display:block;。

另外，我不知道如果#on真正100％减去.onleft和.onright的宽度（8个像素），你可以100％获得100％。我会把它减少到适合最常见窗口宽度的东西。

.onleft{
 /* display:block; <-- REMOVE THIS LINE */
 /* position:relative; <-- REMOVE THIS LINE */
    color:#0d95d4;
    float:left;
    background-image:url(images/logonav_onleft.png);
    background-repeat:no-repeat;
    width:4px;
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}

.onright{
 /* display:block; <-- REMOVE THIS LINE */
 /* position:relative; <-- REMOVE THIS LINE */
    color:#0d95d4;
    float:right;
    background-image:url(images/logonav_onright.png);
    background-repeat:no-repeat;
    width:4px;
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}

#on{
 /* display:block; <-- REMOVE THIS LINE */
    margin-top:-10px;
    color:#0d95d4;
    float:left;
    background: url(images/logonav_on.png) repeat-x;
    width: 98%;  /* Adjust this to suit your design */
    height:47px;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 27px;
    font-weight: bold;
    font-variant: normal;
    text-decoration:none;
}

Answer 2

见the page for the 'display' property。如果你试图将三个div放在同一行，那么你应该使用display: inline;（或者我可能误解了你的问题？）

Answer 3

您需要执行以下操作：

对所有三个人使用float:left 在PIXELS中为#on

设置宽度

Answer 4

这是你想要做的吗？如果是这样，请在您拥有的<li>中添加一个类，并将其添加为该类的规则：

margin-top: -47px;

enter image description here

DIV走下坡路

4 个答案: