Question

我正在尝试为div id提供一个图像，其背面链接位于850像素的左侧。在同一行上，我需要一个Div Id，其中心位于带有文本的850px行。任何帮助表示赞赏

这是我的CSS

        #container3 > div {
    background-color:#000000;
    color:#FFFF00;
    font-size:18;
    font-family:arial;
    font-weight:Normal;
    width:850px;

}
    #BackLink {
    position:relative;
    background-image: url(../Images/Back-ButtonB.png);
    float:left;
    display:inline-block;
    width:80;
    height="18;

}
    #ObjectName {
    position:relative;
    text-align:center;

}

以下是div ids

 <div id="container3">
<div id="BackLink"><a href=[Backlink]></a></div><div id="ObjectName">[ObjectName]</div>
</div>

Answer 1

下划线和链接问题是因为您没有使用<a>关闭</a>。

Html应该是：

<div id="container3">
  <div id="BackLink">
    <a href=[BackLink]>
      <img border="0" src="../Images/Back-ButtonB.gif" width="80" height="18">
    </a>
  </div>
  <div id="ObjectName">[ObjectName]</div>
</div>

这可能会或可能不会解决您的布局问题，但它绝对是关于下划线问题的答案

永

Answer 2

刚刚将这个jsfiddle放在一起，以说明绝对定位和文本对齐的使用。 position：relative在父div（container3）上设置。 Backlink绝对位于左上方，objectname的文本为align：center，以便文本在顶部居中。

http://jsfiddle.net/GXMbL/1/

<div id="container3">
  <div id="BackLink">
    <a href=[BackLink]>
      <!-- <img border="0" src="../Images/Back-ButtonB.gif" width="80" height="18"> -->
        Backlink        
    </a>
  </div>
  <div id="ObjectName">[ObjectName]</div>
</div>

和css（这需要为你的目的进行精炼，但它具有你需要的基础）

#container3{
    width:450px;
    height:300px;
    position:relative;
    background-color:#999999;
}
#BackLink{
    position:absolute;
    top:0;
    left:0;
}
#ObjectName{
    text-align:center;
}

如何使用附加链接提供div ID图像？

2 个答案: