0
これを適切に処理する問題があります。私はテーブル全体が少し左にオフセットされていると思うが、私が本当に気づくのはアイコンだ。彼らはただの髪の毛になるはずです。私はそれをもう少しスライドさせる余裕を追加することができますが、私は正確なものを探しています。それは私がオフになっているピクセルの数を正確に知らないと気になります。誰かが私の問題が何であるか教えていただけますか？そして、記録のために私はコーディングにはまったく新しいです、そして、私がこれを始めたときの私の方向性がどんなものになるのかははっきりしませんでした。私は、CSSコードに冗長性/非効率性があると確信しています。ここはフィドルです。位置決め/スペーシング/センタリングテーブルデータ
https://jsfiddle.net/smatchymo/rdxh9hd4/8/
そして、ここのコードです。事前に
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;
}
ありがとう：ここ
<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>