HTML表单按钮定位

时间:2014-02-02 20:32:46

标签: html css

enter image description here

我的HTML:

<div id="form1">
        <p>Find Bus Ticket</p>
        <form action="demo_form.asp" autocomplete="on" >
        Departure City<br>
        <br><select name="mydropdown" alt="Ddeparture City" id="departurecity">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select><br>
        <br>Arrival Time <br>
        <br><select name="mydropdown" id="arrivaltime">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        <p id="dc">Departure Time<br></p>
        <br><select name="mydropdown" id="Departuretime">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
        <p id="dd">Departure Date<br></p>
        <br><select name="mydropdown" id="DepartureDate">
        <option value="Milk">Fresh Milk</option>
        <option value="Cheese">Old Cheese</option>
        <option value="Bread">Hot Bread</option>
        </select>
    <div id="user">
        <div id="adult1">
            Adult <br>
            <br><select name="mydropdown" id="adult">
            <option value="Milk">Fresh Milk</option>
            <option value="Cheese">Old Cheese</option>
            <option value="Bread">Hot Bread</option>
            </select>
        </div>
        Child<br>
        <br><select name="mydropdown" id="child">
        <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>
    </div>
        <input type="submit">

    </form>
</div>

我的CSS

#form1 {
    border: 1px solid white;
    margin-right:80px;
    font: bold 14px Tahoma;
    color:white;
    width:50%;
    float:bottom;
    position: absolute;
    bottom:-170%;
    background: #3399FF;
    margin-left: 400px;
    padding-left: 25px;
    padding-top: -5px;
}
#departurecity {
    width:290px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
}
#arrivaltime {
    width:290px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
}
#Departuretime {
    width:290px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
    float:right;
    margin-top:-117px;
    margin-right:40px;
}
#dc {
    margin-top:-125px;
    float:right;
    margin-right:222px;
}
#DepartureDate {
    width:290px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
    float:right;
    margin-top:-47px;
    margin-right:40px;
}
#dd {
    margin-top:-65px;
    float:right;
    margin-right:222px;
}
#adult {
    width:90px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
}
#child {
    width:90px;
    height:30px;
    -webkit-border-radius:3px;
    border: 1px white;
    margin-left: 190px;
    padding-top:0px;
}
#user {
    margin-top:-90px;
}
#adult1 {
}

实际上,我想将突出显示的按钮放在四个下拉菜单(按钮)的正下方。请帮我解决这个问题。告诉我我做错了什么。

0 个答案:

没有答案