0

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

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

3 回答 3

0

尝试这个

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

根据需要更改值

于 2013-03-25T19:53:49.333 回答
0

你可以改变他们的size属性。

加上他们没有room属性。我不知道你想做什么。你不能使随机属性。

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

等等

这是演示http://jsfiddle.net/btevfik/a8Urj/

于 2013-03-25T18:55:14.400 回答
0

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

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

于 2013-03-25T18:57:29.020 回答