Question

我试图用HTML创建一个足球场＆amp; CSS，但我被卡住了。我已经尝试了几个小时调试，但无济于事。

这是我的代码：

＆＃13;

#EndZone {
  float: left;
  width: 300px;
  height: 500px;
  background-color: red;
}
.TopHash div {
  margin-left: 300px;
  width: 30px;
  height: 30px;
  border-right: 1px solid white;
}
#MiddleTopHash div {
  margin-top: 170px;
  width: 30px;
  height: 30px;
  border-right: 1px solid white;
  float: left;
}
.MiddleBottomHash div {
  margin-top: 270px;
  width: 30px;
  height: 30px;
  border-right: 1px solid white;
  float: left;
}
.BottomHash div {
  margin-top: 470px;
  width: 30px;
  height: 30px;
  border-right: 1px solid white;
  float: left;
}

＆＃13;

<div class="FootballField">
  <div id="EndZone"></div>
  <div class="TopHash">
    <div id="OneYardLineTopHash"></div>
    <div id="TwoYardLineTopHash"></div>
    <div id="ThreeYardLineTopHash"></div>
    <div id="FourYardLineTopHash"></div>
  </div>
  <div id="FiveYardLine"></div>
  <div class="TopHash">
    <div id="SixYardLine"></div>
    <div id="SevenYardLine"></div>
    <div id="EightYardLine"></div>
    <div id="NineYardLine"></div>
    <div id="TenYardLine"></div>
  </div>
  <div class="MiddleTopHash">
    <div id="OneYardLineMiddleTopHash"></div>
    <div id="TwoYardLineMiddleTopHash"></div>
  </div>
  <div class="MiddleBottomHash">
    <div id="OneYardLineMiddleBottomHash"></div>
    <div id="TwoYardLineMiddleBottomHash"></div>
  </div>
  <div class="BottomHash">
    <div id="OneYardLineBottomHash"></div>
    <div id="TwoYardLineBottomHash"></div>
  </div>
</div>

＆＃13;

编辑：如何获得以下CSS规则以使每个散列30px到彼此的右边？

.TopHash div {
    left: 300px;
    width: 30px;
    height: 30px;
    border-right: 1px solid white;
}

编辑2：这是我想要的结果： Football Field

唯一的区别是我希望院子里的哈希值相距30px

Answer 1

看起来我要以艰难的方式做到这一点

HTML：

    <div class="FootballField">
    <div id="EndZone"></div>
    <div class="TopHash">
    <div id="OneYardLineTopHash"></div>
    <div id="TwoYardLineTopHash"></div>
    <div id="ThreeYardLineTopHash"></div>
    <div id="FourYardLineTopHash"></div>
    <div id="SixYardLineTopHash"></div>
    <div id="SevenYardLineTopHash"></div>
    <div id="EightYardLineTopHash"></div>
    <div id="NineYardLineTopHash"></div>
    <div id="ElevenYardLineTopHash"></div>
    <div id="TwelveYardLineTopHash"></div>
    <div id="ThirteenYardLineTopHash"></div>
    <div id="FourteenYardLineTopHash"></div>
    <div id="SixteenYardLineTopHash"></div>
    <div id="SeventeenYardLineTopHash"></div>
    <div id="EighteenYardLineTopHash"></div>
    <div id="NineteenYardLineTopHash"></div>
    <div id="TwentyOneYardLineTopHash"></div>
    <div id="TwentyTwoYardLineTopHash"></div>
    <div id="TwentyThreeYardLineTopHash"></div>
    </div>
    <div class="MiddleTopHash">
    <div id="OneYardLineMiddleTopHash"></div>
    <div id="TwoYardLineMiddleTopHash"></div>
    <div id="ThreeYardLineMiddleTopHash"></div>
    <div id="FourYardLineMiddleTopHash"></div>
    <div id="SixYardLineMiddleTopHash"></div>
    <div id="SevenYardLineMiddleTopHash"></div>
    <div id="EightYardLineMiddleTopHash"></div>
    <div id="NineYardLineMiddleTopHash"></div>
    <div id="ElevenYardLineMiddleTopHash"></div>
    <div id="TwelveYardLineMiddleTopHash"></div>
    <div id="ThirteenYardLineMiddleTopHash"></div>
    <div id="FourteenYardLineMiddleTopHash"></div>
    <div id="SixteenYardLineMiddleTopHash"></div>
    <div id="SeventeenYardLineMiddleTopHash"></div>
    <div id="EighteenYardLineMiddleTopHash"></div>
    <div id="NineteenYardLineMiddleTopHash"></div>
    <div id="TwentyOneYardLineMiddleTopHash"></div>
    <div id="TwentyTwoYardLineMiddleTopHash"></div>
    <div id="TwentyThreeYardLineMiddleTopHash"></div>
    </div>
    <div class="MiddleBottomHash">
    <div id="OneYardLineMiddleBottomHash"></div>
    <div id="TwoYardLineMiddleBottomHash"></div>
    <div id="ThreeYardLineMiddleBottomHash"></div>
    <div id="FourYardLineMiddleBottomHash"></div>
    <div id="SixYardLineMiddleBottomHash"></div>
    <div id="SevenYardLineMiddleBottomHash"></div>
    <div id="EightYardLineMiddleBottomHash"></div>
    <div id="NineYardLineMiddleBottomHash"></div>
    <div id="ElevenYardLineMiddleBottomHash"></div>
    <div id="TwelveYardLineMiddleBottomHash"></div>
    <div id="ThirteenYardLineMiddleBottomHash"></div>
    <div id="FourteenYardLineMiddleBottomHash"></div>
    <div id="SixteenYardLineMiddleBottomHash"></div>
    <div id="SeventeenYardLineMiddleBottomHash"></div>
    <div id="EighteenYardLineMiddleBottomHash"></div>
    <div id="NineteenYardLineMiddleBottomHash"></div>
    <div id="TwentyOneYardLineMiddleBottomHash"></div>
    <div id="TwentyTwoYardLineMiddleBottomHash"></div>
    <div id="TwentyThreeYardLineMiddleBottomHash"></div>
    </div>
    <div class="BottomHash">
    <div id="OneYardLineBottomHash"></div>
    <div id="TwoYardLineBottomHash"></div>
    <div id="ThreeYardLineBottomHash"></div>
    <div id="FourYardLineBottomHash"></div>
    <div id="SixYardLineBottomHash"></div>
    <div id="SevenYardLineBottomHash"></div>
    <div id="EightYardLineBottomHash"></div>
    <div id="NineYardLineBottomHash"></div>
    <div id="ElevenYardLineBottomHash"></div>
    <div id="TwelveYardLineBottomHash"></div>
    <div id="ThirteenYardLineBottomHash"></div>
    <div id="FourteenYardLineBottomHash"></div>
    <div id="SixteenYardLineBottomHash"></div>
    <div id="SeventeenYardLineBottomHash"></div>
    <div id="EighteenYardLineBottomHash"></div>
    <div id="NineteenYardLineBottomHash"></div>
    <div id="TwentyOneYardLineBottomHash"></div>
    <div id="TwentyTwoYardLineBottomHash"></div>
    <div id="TwentyThreeYardLineBottomHash"></div>
    </div>
    <div id="FiveYardLine"></div>
    <div id="TenYardLineTopMark">&lt10</div>
    <div id="TenYardLine"></div>
    <div id="TenYardLineBottomMark">&lt10</div>
    <div id="FifteenYardLine"></div>
    <div id="TwentyYardLineTopMark">&lt20</div>
    <div id="TwentyYardLine"></div>
    <div id="TwentyYardLineBottomMark">&lt20</div>

CSS：

    #EndZone{float: left; width: 300px; height: 500px; background-color: red;}
    .TopHash div{width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}
    #OneYardLineTopHash{left: 300px;}
    #TwoYardLineTopHash{left: 330px;}
    #ThreeYardLineTopHash{left: 360px;}
    #FourYardLineTopHash{left: 390px;}
    #SixYardLineTopHash{left: 450px;}
    #SevenYardLineTopHash{left: 480px;}
    #EightYardLineTopHash{left: 510px;}
    #NineYardLineTopHash{left: 540px;}
    #ElevenYardLineTopHash{left: 600px;}
    #TwelveYardLineTopHash{left: 630px;}
    #ThirteenYardLineTopHash{left: 660px;}
    #FourteenYardLineTopHash{left: 690px;}
    #SixteenYardLineTopHash{left: 750px;}
    #SeventeenYardLineTopHash{left: 780px;}
    #EighteenYardLineTopHash{left: 810px;}
    #NineteenYardLineTopHash{left: 840px;}
    #TwentyOneYardLineTopHash{left: 900px;}
    #TwentyTwoYardLineTopHash{left: 930px;}
    #TwentyThreeYardLineTopHash{left: 960px;}

    .MiddleTopHash div{top: 170px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}
    #OneYardLineMiddleTopHash{left: 300px;}
    #TwoYardLineMiddleTopHash{left: 330px;}
    #ThreeYardLineMiddleTopHash{left: 360px;}
    #FourYardLineMiddleTopHash{left: 390px;}
    #SixYardLineMiddleTopHash{left: 450px;}
    #SevenYardLineMiddleTopHash{left: 480px;}
    #EightYardLineMiddleTopHash{left: 510px;}
    #NineYardLineMiddleTopHash{left: 540px;}
    #ElevenYardLineMiddleTopHash{left: 600px;}
    #TwelveYardLineMiddleTopHash{left: 630px;}
    #ThirteenYardLineMiddleTopHash{left: 660px;}
    #FourteenYardLineMiddleTopHash{left: 690px;}
    #SixteenYardLineMiddleTopHash{left: 750px;}
    #SeventeenYardLineMiddleTopHash{left: 780px;}
    #EighteenYardLineMiddleTopHash{left: 810px;}
    #NineteenYardLineMiddleTopHash{left: 840px;}
    #TwentyOneYardLineMiddleTopHash{left: 900px;}
    #TwentyTwoYardLineMiddleTopHash{left: 930px;}
    #TwentyThreeYardLineMiddleTopHash{left: 960px;}

    .MiddleBottomHash div{top: 270px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}
    #OneYardLineMiddleBottomHash{left: 300px;}
    #TwoYardLineMiddleBottomHash{left: 330px;}
    #ThreeYardLineMiddleBottomHash{left: 360px;}
    #FourYardLineMiddleBottomHash{left: 390px;}
    #SixYardLineMiddleBottomHash{left: 450px;}
    #SevenYardLineMiddleBottomHash{left: 480px;}
    #EightYardLineMiddleBottomHash{left: 510px;}
    #NineYardLineMiddleBottomHash{left: 540px;}
    #ElevenYardLineMiddleBottomHash{left: 600px;}
    #TwelveYardLineMiddleBottomHash{left: 630px;}
    #ThirteenYardLineMiddleBottomHash{left: 660px;}
    #FourteenYardLineMiddleBottomHash{left: 690px;}
    #SixteenYardLineMiddleBottomHash{left: 750px;}
    #SeventeenYardLineMiddleBottomHash{left: 780px;}
    #EighteenYardLineMiddleBottomHash{left: 810px;}
    #NineteenYardLineMiddleBottomHash{left: 840px;}
    #TwentyOneYardLineMiddleBottomHash{left: 900px;}
    #TwentyTwoYardLineMiddleBottomHash{left: 930px;}
    #TwentyThreeYardLineMiddleBottomHash{left: 960px;}

    .BottomHash div{top: 470px; width: 30px; height: 30px; border-right: 1px solid white; position: absolute;}
    #OneYardLineBottomHash{left: 300px;}
    #TwoYardLineBottomHash{left: 330px;}
    #ThreeYardLineBottomHash{left: 360px;}
    #FourYardLineBottomHash{left: 390px;}
    #SixYardLineBottomHash{left: 450px;}
    #SevenYardLineBottomHash{left: 480px;}
    #EightYardLineBottomHash{left: 510px;}
    #NineYardLineBottomHash{left: 540px;}
    #ElevenYardLineBottomHash{left: 600px;}
    #TwelveYardLineBottomHash{left: 630px;}
    #ThirteenYardLineBottomHash{left: 660px;}
    #FourteenYardLineBottomHash{left: 690px;}
    #SixteenYardLineBottomHash{left: 750px;}
    #SeventeenYardLineBottomHash{left: 780px;}
    #EighteenYardLineBottomHash{left: 810px;}
    #NineteenYardLineBottomHash{left: 840px;}
    #TwentyOneYardLineBottomHash{left: 900px;}
    #TwentyTwoYardLineBottomHash{left: 930px;}
    #TwentyThreeYardLineBottomHash{left: 960px;}

    #FiveYardLine{left: 420px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}
    #TenYardLineTopMark{left: 575px; top: 100px; color: white; position: absolute; font-size: 24px;}
    #TenYardLine{left: 570px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}
    #TenYardLineBottomMark{left: 575px; top: 400px; color: white; position: absolute; font-size: 24px;}
    #FifteenYardLine{left: 720px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}
    #TwentyYardLineTopMark{left: 875px; top: 100px; color: white; position: absolute; font-size: 24px;}
    #TwentyYardLine{left: 870px; width: 30px; height: 500px; border-right: 1px solid white; position: absolute;}
    #TwentyYardLineBottomMark{left: 875px; top: 400px; color: white; position: absolute; font-size: 24px;}

在HTML＆amp;中创建一个足球场CSS

1 个答案: