我是编码新手,我正在努力使我的输入达到我需要的大小。
我有一个 6 列的表单,所有输入框的大小都相同。我希望一些更宽,一些更窄。
我试图缩小框的所有内容都会导致列折叠
我的 HTML 是:
<!DOCTYPE html>
<html>
<head>
<title>Web Form</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="header"><h1>LED Savings Calculator</h1></div>
<div id="c1" class="column1" >
<form room="input" action="#" method="post">
Room 1: <input type="text" room="" value="" ><br/>
Room 2: <input type="text" room="" value=""><br/>
Room 3: <input type="text" room="" value=""><br/>
Room 4: <input type="text" room="" value=""><br/>
Room 5: <input type="text" room="" value=""><br/>
Room 6: <input type="text" room="" value=""><br/>
Room 7: <input type="text" room="" value=""><br/>
Room 8: <input type="text" room="" value=""><br/>
Room 9: <input type="text" room="" value=""><br/>
Room 10: <input type="text" room="" value=""><br/>
</form>
</div>
<div id="lights" class="column1" >
<form lights="input" action="#" method="post">
Existing Lights: <input type="text" lights="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
</form>
</div>
<div id="Watts" class="column2" >
<form watts="input" action="#" method="post">
Lamp Size (Watts): <input type="text" lights="" value="" ><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value="" ><br/>
</form>
</div>
<div id="Quantity" class="column2" >
<form room="input" action="#" method="post">
How Many?: <input type="text" lights="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
</form>
</div>
<div id="savings" class="column2" >
<form room="input" action="#" method="post" >
Costs: <input type="text" lights="" value=""><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
</form>
</div>
<div id="savings" class="column2" >
<form room="input" action="#" method="post" >
Savings: <input type="text" lights="" value=""><br/>
. <input type="text" room="" value="" ><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
. <input type="text" room="" value=""><br/>
</form>
</div>
而 CSS 是:
body {
background-color: #ffffff;
}
#header {
position: relative;
top: -10px;
background-color: #00A0B0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 40px;
}
h1 {
font-family: Myriad-pro;
color: #ffffff;
text-align: center;
}
div.column1 {
float:left;
width:150px;
height:400px;
}
div.column2 {
float:left;
width:150px;
height:400px;
}