Входные данные разного размера в форме с несколькими столбцами

Я новичок в кодировании, и я изо всех сил пытаюсь сделать свои входные данные размером, который мне нужен.

У меня есть форма из 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;
}

html css css-tables

Steve 25.03.2013 источник

comment

В вашем <input/> для чего нужен атрибут room? - Linus Caldwell 25.03.2013

comment

Он не должен быть там, чтобы создать столбцы, которые я c&p'ed, чтобы сэкономить время. Как только у меня будет правильный макет, я изменю атрибуты и jscript - Steve 25.03.2013

Ответы (3)

arrow_upward
0
arrow_downward

Похоже, вы определяете ширину таблицы с помощью CSS внизу, вы можете настроить это!

Вы пытались добавить ширину в каждый текстовый ввод?

Ricky43 25.03.2013

comment

Когда я это делаю, я теряю всякое «оправдание». Ящики ниже поднимаются, что приводит к смещению всего. Мне нужно, чтобы «комнаты» были широкими для ввода, например «гостиная», но для таких вещей, как «количество», требуется место только для нескольких цифр, таких как «3». - Steve; 25.03.2013

arrow_upward
0
arrow_downward

вы можете изменить их атрибут size.

плюс у них нет атрибута room. я не знаю, что вы пытаетесь сделать. вы не можете создавать случайные атрибуты.

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

и т.п.

вот демо http://jsfiddle.net/btevfik/a8Urj/

btevfik 25.03.2013

comment

Большое спасибо. Когда я ввожу размеры таким образом, я теряю всякое «обоснование». Ящики ниже поднимаются, что приводит к смещению всего. Мне нужно, чтобы «комнаты» были широкими для ввода, например «гостиная», но для таких вещей, как «количество», требуется место только для нескольких цифр, таких как «3». - Steve; 25.03.2013

comment

Вы можете создать пример jsfiddle. - btevfik; 25.03.2013

comment

Я изо всех сил пытаюсь вставить код в jsfiddle - это становится очень неловко! - Steve; 25.03.2013

comment

Вы пытаетесь иметь все в одном ряду? - btevfik; 25.03.2013

comment

@Steve в твоем нет размера, добавь div.column2 input{ width:50px; } - Shikiryu; 10.05.2013

arrow_upward
0
arrow_downward

попробуй это

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

измените значение, как вам нужно

XTGX 25.03.2013

comment

Вы пропустили '=', т.е. style=Width:50px - anujin; 09.05.2013

Входные данные разного размера в форме с несколькими столбцами

Ответы (3)

Вопросы по теме