Question

我经历过w3school并阅读了一些在线资源，我很难理解html和css，请有人帮助我，我是初学者

我创建了这个表单，但问题是它不是中心而且看起来不太好，我希望看到这样的

                                  Latitude Max

                                    [    ]
      Longitude Min [   ]                         [    ] Longitude Max

                                    [    ]

                                  Latitude Min

                                     SUBMIT

很多人告诉我使用dreamviewer它的gui，但我使用centos所以我喜欢理解并手动编写html和css代码。

看这里是我的代码

     <!DOCTYPE html>
     <html>
     <body>
           <form action="search.php" method="post">
           Latitude Max <input  type="lat_max" name="RANGE[]"></br/>
               </br/>Longitude Min <input  type="lon_min" name="RANGE[]">
               <input type="lon_max" name="RANGE[]">Longitude Max</br/>
               </br/>Latitude Min <input type="lat_min" name="RANGE[]">
               </br/><input type="submit" name="formSubmit" value="Submit" />
           </form>

    </body>
    </html>

这个表格我想在php脚本里面调用请帮助我..因为我初学者我花了超过1天来设计一个html页面，很难但是真的。

Answer 1

我对初学者非常同情，因为我大约一年前。这需要时间，并阅读大量的代码。我会给你一个“解决方案”，但大部分时间花在小提琴的CSS部分上。如果这是您的第一步，您仍然需要学习如何从输入字段中读取值，清理它们并使用它们。

大型程序以单FIDDLE开头。

CSS

.container {
    width: 600px;
    border: 1px solid black;
}
.singleinput {
    width: 100%;
    text-align: center;
    margin-top: 25px;
}
.doubleinput {
    width: 100%;
    margin-top: 25px;
    border: 1px solid transparent;
    overflow: hidden;
}
.minlong {
    float: left;
    margin-left: 30px;
}
.maxlong {
    float: right;
    margin-right: 30px;
}
.buttondiv {
    width: 80px;
    margin: 20px auto;
}
input {
    width: 50px;
}

建议：

了解如何使用jsfiddle - 您可以在一小时内进行实验，而无需将文件上传到服务器。它内置了所有'stuff'（jQuery）。
了解div宽度和“浮动”div。
“overflow：hidden”是div中浮动div的技巧。你只需要记住它。
玩边距并观察会发生什么。
弄清楚是“保证金：0px auto;”装置
祝你好运！不要放弃！

Answer 2

我认为为输入制作实际标签是个好主意。属性HTML和方便的样式。此外，将单独的块嵌入div中也很方便：

 <!DOCTYPE html>
 <html>
 <body>
       <form action="search.php" method="post">
           <div class="pos lat_max">
             <label for="lat_max">Latitude Max</label>
             <input id="lat_max" name="RANGE[]"/>
           </div>

           <div class="pos lon_min">
             <label for="lon_min">Longitude Min</label>
             <input id="lon_min" name="RANGE[]"/>
           </div>

           <div class="pos lon_max">
             <label for="lon_max">Longitude Max</label>
             <input id="lon_max" name="RANGE[]"/>
           </div>

           <div class="pos lat_min">
             <label for="lat_min">Latitude Min</label>
             <input id="lat_min" name="RANGE[]"/>
           </div>

           <input type="submit" name="formSubmit" value="Submit" />
       </form>

</body>
</html>

之后你可以设置它们的样式：

/* Start by absolutely positioning every element so you can put them 
   where ever you want. This is not always the right thing to do, but I think
   it is for pieces of the website where you have a very specific positioning 
   like this. */
div.pos {
    width: 10rem;
    position: absolute;
}
label {
    display: block;
    text-align: center;
}
.pos label,
.pos input {
    position: relative;
    width: 100%;
}

/* Center the container of the latitude inputs */
.lat_max,
.lat_min {
    left: 50%;
    right: auto;
}

/* Correct the position, because the left side of the container is centered */
.lat_max *,
.lat_min * {
    position: relative;
    left: -50%;
}
/* Lat-min at the bottom */
.lat_min {
    bottom: 0;
}

/* lon in the vertical middle of the page */
.lon_min,
.lon_max {
    top: 50%;
}

/* lon max on the right */
.lon_max {
    right: 0;
}

我知道，这不完全是你所描述的，但你可以继续微调它。 http://jsfiddle.net/s99hU/

一个重要的注意事项： position: absolute现在可以在页面中使用，但实际上它会查看具有position: absolute或position: relative的最近父级。

position: relative不会移动元素本身，因此您可以将其添加到表单中。这将在表单中放置输入，而不是分布在页面上。之后，您可以为表单提供精确的宽度和高度（尤其是需要高度，否则表单将折叠）。然后输入将定位在表单内部，表单本身就是一个自包含的块，可以嵌入并定位在页面内部，但是您可以随意使用。

无法理解html和css，协调录入表单

2 个答案: