Question

如何删除此负边距并替换它？

有什么方法可以做到这一点？

点击图片上的以查看链接。

您必须在图片上点击才能看到相关链接。

.link a {
        display: block;
        width: 50px;
        height: 50px;
        margin: -50px 0 0;
        background: black;
        box-Shadow: inset 0 0 0 3px #0059dd;
      }

一种方法是使用：

display: flex;

https://jsfiddle.net/j8fL15s5/18/

还有其他方法吗？

这可以完成吗＆＃39;没有＆＃39;使用flex？

Answer 1

将display: flex添加到.link div：

.link div {
    margin: 0 0 12px 0;
    display: flex;
 }

从margin: -50px 0 0移除.link a：

.link a {
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
}

替换以下块：

a.x1 {
    margin: 0;
}

a.x2 {
    margin-left: 54px;
}

a.x3 {
    margin-left: 108px;
}

a.x4 {
    margin-left: 162px;
}

a.x5 {
    margin-left: 216px;
}

通过

a.x2, a.x4 {
    margin: 0 4px;
}

更新了Fiddle

编辑（没有弹箱）：

给.link div一个固定的height（这是为了避免最后一个div之后的额外空格所必需的）：

.link div {
    margin: 0 0 12px 0;
    height: 50px;
}

将display: inline-block添加到.link a：

.link a {
    width: 50px;
    height: 50px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
}

删除所有a.x*选择器。

Fiddle

Answer 2

调整后的样式：

.link div {
  margin: 0 0 12px 0;
  font-size: 0; /* Remove whitespace created by inline-block */
}

.link a:first-child {
    margin-left: 0px;
}

.link a {
    width: 50px;
    height: 50px;
    margin: 0px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
    margin-left: 4px;
}

<强>要点：

重置margin属性值并将其显示为inline-block
删除单个锚链接margin-left样式
在第二行

.x3

代码段示范：

＆＃13;

(function iife() {
      "use strict";
      document.querySelector(".myLink").classList.add("hide");

      function playButtonClickHandler() {
        document.querySelector(".myLink").classList.remove("hide");
        var button = document.querySelector(".playButton");
        var player = document.querySelector("#player");
        document.querySelector(".playButton .initial").style.display = "none";
        player.volume = 1.0;
        if (player.paused) {
          button.classList.add("playing");
          document.querySelector(".playButton .play").style.display = "none";
          document.querySelector(".playButton .pause").style.display = "inline-block";
          player.play();
        } else {
          document.querySelector(".playButton .play").style.display = "inline-block";
          document.querySelector(".playButton .pause").style.display = "none";
          player.pause();
        }
      }
      var playButton = document.querySelector(".playButton");
      playButton.addEventListener("click", playButtonClickHandler);
    }());

＆＃13;

.wrap {
    position: relative;
    display: table;
    background:red;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-Shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
    
  }
  
  .link div {
    margin: 0 0 12px 0;
    font-size: 0; /* Remove whitespace created by inline-block */
  }
  
.link a:first-child {
    margin-left: 0px;
}

.link a {
    width: 50px;
    height: 50px;
    margin: 0px;
    background: black;
    box-Shadow: inset 0 0 0 3px #0059dd;
    display: inline-block;
    margin-left: 4px;
}
  
  /*a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }*/
  
  .hide,.play {
    display: none;
  }
  
  .link div:last-child {
    margin-bottom: 0;
  }

＆＃13;

<div class="wrap">
    <div class="myLink">
      <div class="link">
        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>

        <div>
          <a class="x1" href="#" target="_blank"></a>
          <a class="x2" href="#" target="_blank"></a>
          <a class="x3" href="#" target="_blank"></a>
          <a class="x4" href="#" target="_blank"></a>
          <a class="x5" href="#" target="_blank"></a>
        </div>
      </div>
    </div>

    <div class="playButton">
      <div class="initial">Links</div>
      <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
        <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
      </svg>

      <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
        <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
      </svg>
    </div>

    <audio id="player" preload="none">
      <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
      </source>
    </audio>
  </div>

＆＃13;

Updated JSFiddle

删除一个负边距并将其替换为不同的值

2 个答案: