Question

我是HTML5和CSS的新手，所以尝试不同的东西。我创建了一个表单：

<div id="form1">
    <form action="demo_form.asp" autocomplete="on" >
        Departure City
        <br><select name="mydropdown" id="departurecity">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select><br>
        Arrival Time 
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        Departure Time
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        Departure Date
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        Adult
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        Child
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        Senior
        <br><select name="mydropdown">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        <input type="submit">     
    </form>
</div>

CSS：

#form1{
 border: 1px solid white;
 margin: 100px;
 width:50%;
 position: absolute;
 right:0;
 bottom:0;
}

现在它位于页面的中心。我想把它移到右边的底部页。我尝试了很多东西，但没有帮助。你们中的任何人都可以告诉我应该怎样做才能达到我的目的吗？

Answer 1

这是你想要的吗？ http://jsfiddle.net/eZ8M7/如果答案是肯定的，那么你只需要删除边际句子。

#form1{
   border: 1px solid white;
   width:50%;
   position: absolute;
   bottom:0;
   right:0;
}

Answer 2

从css中移除边距

#form1{
border: 1px solid white;
width:50%;
position: absolute;
right:0;
bottom:0;
}

当你写margin:100px时，这意味着你的元素会从四个方面带走100px。

Js Fiddle Demo

您还可以缩小#form1的宽度，使其更加正确地查看

Js Fiddle Demo reduce width

将表单移动到右下角

2 个答案: