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

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

У меня есть 6-ти столбцовая форма, при этом все поля ввода одинакового размера. Я бы хотел, чтобы некоторые были более широкими, а некоторые - более узкими.

Все, что я пытался сузить коробки вызывает столбец Collaps

Мой 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; 
}

источник

2013-03-25 Steve

В вашем '' , что атрибут 'room' для? –

Этого не должно быть, чтобы создать столбцы, которые я сэкономил, чтобы сэкономить время. Как только у меня есть верстка, я поправлю атрибуты и jscript – Steve

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

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

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

т.д.

здесь демо http://jsfiddle.net/btevfik/a8Urj/

источник

2013-03-25 18:55:14 btevfik

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

, вы можете создать пример jsfiddle. – btevfik

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

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

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

источник

2013-03-25 18:57:29 Ricky43

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

попробовать это изменение

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

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

источник

2013-03-25 19:53:49 XTGX

Вы пропустили '=' ie style = "Width: 50px " – anujin

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

ответ

Смежные вопросы