Question

我是CSS，HTML5和JavaScript的新手。你在下面看到的代码不是我的。我在浏览器上运行了代码，车底下有三辆汽车和文本框的图像并提交按钮。当我尝试在现有代码中添加更多汽车时，例如我添加了克莱斯勒，道奇等，提交按钮变得不对齐。我想要做的是将这些汽车展开，以便它们覆盖整个页面。此刻，您将看到三辆车集中在屏幕中间。我想做的是在现有的3辆车上增加6辆车，这样总共有9辆车 - 每排3辆车，总共会有3排车。这九辆车将在整个页面中均匀分布。另外，如果我不想要一辆车的标识，而是一个带有个别汽车名称的盒子，我该怎么做呢？换句话说，总共有9个盒子，每个盒子包含汽车的实际名称，每个盒子下面有一个文本框，用户可以在其中添加注释，在文本框下方有提交单选按钮。我的问题（由于缺乏经验）是在我添加越来越多的汽车时，文本框仍然存在，但提交单选按钮变得严重错位。

此外，背景绿松石色仅覆盖三辆车周围的区域。如何将颜色覆盖整页？

   <!DOCTYPE html>
   <html>
   <head>
   <style>
   #form {
   background-color: rgb(0,255,255);
   position: absolute;
   overflow: hidden;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%)
   }
  .car {
   float: left;
   margin: 2% 2% 5% 2%;
   }

  .car label img {
   transform: scale(0.8);
   transition-duration: 0.2s;
   }

  .car label img:hover {
   cursor: pointer;
   transform: scale(1);
   }

  .comment {
   position: absolute;
   visibility: hidden;
   }

  .comment input {
   width: 128px;
   font-size: 1em;
   }

  .car label img {
   width: 128px;
   display: block;
   }

  #button {
   position: relative;
   left: 66%;
   margin: 2%;
   visibility: hidden;
   }

  </style>
  </head>
  <body>
  <div id="form">
        <form method="post" action="furiousindex.php">
            <div class="car">
                <label for="Mercedes">
                    <img src="http://tinyurl.com/on964r9" />
                </label>
                <div class="comment">
                    <input type="text" id="Mercedes" placeholder="Mercedes"       
                 />
                </div>
            </div>
            <div class="car">
                <label for="BMW">
                    <img src="http://tinyurl.com/on964r9" />
                </label>
                <div class="comment">
                    <input type="text" id="BMW" placeholder="BMW" />
                </div>
            </div>
            <div class="car">
                <label for="Audi">
                    <img src="http://tinyurl.com/on964r9" />
                </label>
                <div class="comment">
                    <input type="text" id="Audi" placeholder="Audi" />
                </div>
            </div>

            <input id="button" type="submit" name="submit" value="Submit">
        </form>
    </div>

     <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'>    
     </script>
    <script>
        $('.car').click(function() {
            $('.comment').css("visibility", "hidden");
            $('#button').css("visibility", "hidden");

            var id = $(this).children('label').attr('for');
            var buttonOffset;
            switch (id) {
                case 'Mercedes':
                    buttonOffset = '0';
                    break;
                case 'BMW':
                    buttonOffset = '33%';
                    break;
                case 'Audi':
                    buttonOffset = '66%';
                    break;

            }

            $(this).children('.comment').css("visibility", "visible");
            $('#button').css("left", buttonOffset);
            $('#button').css("visibility", "visible");
        });

        $('.comment').mouseleave(function() {
            setTimeout(function() {
                $('.comment').css("visibility", "hidden");
                $('#button').css("visibility", "hidden");
            }, 5000);
        });
    </script>

  </body>
  </html>

Answer 1

将此添加到#form。它会限制汽车周围的箱子大小以适应最多三辆车（基于其他变量），你可以添加任意数量的行。

#form {
    width: 450px;
}

使整个背景变得绿松石：

body {
    background-color: rgb(0,255,255);
}

我认为这涵盖了一切。如果没有，让我知道我错过了什么。

由于添加了徽标，单选按钮变得不对齐

1 个答案: