Question

我是编码的新手，我正在努力使我的输入达到我需要的大小。

我有一个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;
}

Answer 1

您可以更改其size属性。

加上他们没有room属性。我不知道你要做什么。你无法建立随机属性。

<input type="text" size="5" value="" >
<input type="text" size="10" value="" >

等

这里是demo http://jsfiddle.net/btevfik/a8Urj/

Answer 2

看起来你在底部用CSS定义表格宽度，你可以调整它！

您是否尝试在每个文字输入中添加宽度？

Answer 3

试试这个

<input type="text"  value=""  style="Width:50px" >
<input type="text"  value=""  style="Width:100px">
<input type="text"  value=""  style="Width:70px">

根据需要更改值

多列形式的不同尺寸输入

3 个答案: