Question

我正确地解决了这个问题。我相信整个桌子稍微向左偏移，但我真正注意到的是图标。他们应该在右边只是一根头发。我可以添加余量来滑动它多一点，但我正在寻找精确的东西。让我感到困扰的是我不确切知道有多少像素。有人能告诉我我的问题在这里吗？而且对于记录来说，我对编码非常陌生，而且当我开始这个时，我不确定我的方向是什么。我确定css代码中存在冗余/效率低下的问题。这是一个小提琴。

https://jsfiddle.net/smatchymo/rdxh9hd4/8/

这是代码。

<body>
  <div id='filter'></div>
  <div id='watchface'></div>
  <div id='text'>
    <table>
      <tr>
        <td class='times'>4:00</td>
        <td id='icon' class='icons'></td>
        <td class='hourTemp'>69</td>
      </tr>
      <tr>
        <td class='times'>5:00</td>
        <td id='icon1' class='icons'></td>
        <td class='hourTemp'>67</td>
      </tr>
    </table>
  </div>
  <div id='timecapsule'>
    <div id='permatime'></div>
    <div id='time'>12:00</div>
  </div>
</body>

这里是CSS：

body {
  height: 100%;
  width: 100%;
}

#watchface {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 360px;
  width: 360px;
  position: absolute;
  border-radius: 100%;
  //background-color: black;
  z-index: 0;
}

#timecapsule {
  height: 360px;
  width: 360px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%;
  z-index: 30;
  overflow: hidden;
}

#permatime {
  position: absolute;
  top: -45px;
  left: 105px;
  height: 100px;
  width: 150px;
  border-radius: 5px;
  //border: 1px solid white;
  background-color: black;
  opacity: .7;
  color: white;
  text-align: center;
  z-index: 40;
}

#time {
  font-size: 30px;
  color: white;
  position: absolute;
  top: 10px;
  left: 105px;
  width: 150px;
  text-align: center;
  z-index: 41;
}


#filter {
  position: absolute;
  height: 360px;
  width: 360px;
  top: 0px;
  left: 0px;
  background-color: black;
  border-radius: 100%;
  opacity: .7;
  z-index: 2;
}

#text {
  list-style-type: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 360px;
  height: 360px;
  font-size: 16px;
  color: white;
  z-index: 3;
  //overflow: auto;
}

.icons {
  height: 37px;
  width: 112px;
  // border: 1px solid yellow;
}

#icon {
  background: url("https://icons.wxug.com/i/c/v4/chancetstorms.svg") no-repeat center;
}

#icon1 {
  background: url("https://icons.wxug.com/i/c/v4/flurries.svg") no-repeat center;
}

.hourTemp {
  font-size: 24px;
  text-align: right;
  width: 74px;
  margin-right: 40px;
}

.times {
  font-size: 24px;
  margin-left: 40px;
  text-align: left;
  //border: 1px solid lime;
  width: 74px;
}

table {
  padding: 75px 0px 0px 0px;
  margin; 0px;
  width: 360px;
  text-align: left;
  list-style-type: none;
  font-size: 32px;
}

td {
  margin: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}

提前致谢！

Answer 1

Bahhh，我发誓我仔细检查了我的数学...我正准备对我的帖子进行编辑，将表格数据和填充的像素大小相加，以便让任何想要帮助的人更容易和更清楚，但是我意识到一切都没有增加到360像素。我的图标类宽度太小了10px ......

定位/间隔/定心表数据

1 个答案: