Question

我有两个问题如果有人可以帮助我，我会非常感激。

我正在开发一个移动网站，页面上有一列图像链接元素。我有一些问题，如下图所示蓝色，图像元素周围的链接元素在外面流血并填充整个div的宽度。

enter image description here

标记：

<body>
      <div id="vinranka">
          <img id="vinrankaIMG" src="img/vinrankaCrop.png">
          <img id="vinkattenText" src="img/vinkattenText.png">
      </div>

      <div id="pageFull">

          <div id="searchBox">
              <form id="searchForm" method="post" action="">
                  <div id="searchFieldBg">
                        <input id="searchField" type="text" value="Sök dryck.." name="query">
                        <input id="searchButton" type="submit" value="Sök" />
                  </div>

              </form>
          </div>

          <div id="btContainer">
              <a class="imgLink" href="redWhine.html"> <img class="buttons" src="img/redWhineBt.png"></a>
              <a class="imgLink" href="whiteWhine.html"> <img class="buttons" src="img/whiteWhineBt.png"></a>
              <a class="imgLink" href="sparkelingWhine.html"> <img class="buttons" src="img/sparkelingWhineBt.png"></a>
              <a class="imgLink" href="champagne.html"> <img class="buttons" src="img/champagneBt.png"></a>
              <a class="imgLink" href="roseWhine.html"> <img class="buttons" src="img/rosevinBt.png"></a>
              <a class="imgLink" href="glogg.html"> <img class="buttons" src="img/gloggBt.png"></a>
          </div>

      </div>

  </body>

编辑：这是CSS：

    html, body {
    margin: 0px;
    padding: 0px;
    background-color: #aed604;
}

#vinrankaIMG {
    position: absolute;
    z-index: 2;
}

#vinkattenText {
    margin-left: 220px;
    margin-top: 10px;
}

#pageFull {
    position: absolute;
    margin-left: 20px;
    width: 454px;
    height: 889px;
    background-image: url('../img/pageFull.png');
    z-index: 1;
}

#btContainer {
    display: block;
    z-index: 10;
}

img.buttons {
    display: block;
    vertical-align: top;
    border: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

a.imgLink {
    margin: 0px;
    padding: 0px;
}

我找到了一个类似问题的主题，其中解决方案是将“vertical-align：top”添加到图像CSS。然而，这对我不起作用，我不确定我们是否也有同样的问题。

另一个问题是用红色描述的区域。我有一个与z-index重叠白色背景div的图像。问题是它也与顶部图像链接重叠，即使图像链接具有更高的z-index，这意味着它在标记为红色的区域中变得不可点亮。图像链接是否锁定在其所在的白色背景上方的每个元素下面？？

我真的希望我已经很好地描述了我的问题...... =）如果有人能帮助我，我将不胜感激！我会回答你提出的任何问题！

谢谢！

/最大

Answer 1

事实证明这很容易。我只是将a元素设置为与图像具有相同的最大宽度。现在它不再流血了。对于重叠，我移动了包含“pageFull”div之外的按钮的div，并将其位置设置为“绝对”。现在，我可以轻松地将整个按钮包移回其原始位置，只是篡改边距，现在它不再与左上角图像重叠。

希望这可能有助于某人！ =）

链接出血图像？

1 个答案: