Php 下线

这是我的代码：

这是我的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%，但我真的不知道如何解决这个问题

有什么建议吗？谢谢大家!

---

链接：

请参阅。如果您试图使三个

div

s位于同一行，那么您可能应该使用

display:inline

（或者我误解了你的问题？

要使用

浮动：

，你必须删除

位置：

和

显示：块

另外，我不知道当它真的是100%减去
的宽度（8个像素）时，你怎么能有100%在
#on
上。onleft
和
。onright
。我会把它简化为适用于大多数普通窗口宽度的东西

.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;
}

.onleft{
/*display:block；您需要执行以下操作：

对所有三个变量使用
float:left
为#on
设置一个以像素为单位的宽度这就是您要做的吗？
如果是这样，请在您拥有的
中的锚中添加一个类，并将其添加为该类的规则：

margin-top: -47px;

如果没有这些图片，我真的看不到您所请求的解决方案。试着制作一个jsfiddle.net示例。@Phil这是我的链接；标题听起来像是一个标记笑话的设置。谢谢你这么做了！：）这毕竟只是宽度！