Отображение элементов формы inline

Question

Я следую руководству от http://www.sitepoint.com/building-list-jquery-local-storage/ , чтобы создать список дел, и я хочу отображать для элементов в одной строке. На данный момент элементы формы сложены друг над другом и отображаются вертикально, но я хочу, чтобы они отображались вертикально. Я в конечном счете, хотят добиться результата, который выглядит следующим образом:

Вот является CSS Code

.task-list{ 
    width: 250px; 
    float: left; 
    margin: 0 5px; 
    background-color: #e3e3e3; 
    min-height: 240px; 
    border-radius: 10px; 
    padding-bottom: 15px; 

} 

.task-list input, .task-list textarea{ 
    width: 240px; 
    margin: 1px 5px; 


} 

.task-list input{ 
    height: 30px; 

} 

.todo-task{ 
    border-radius: 5px; 
    background-color: #fff; 
    width: 230px; 
    margin: 5px; 
    padding: 5px; 
} 

.task-list input[type="button"]{ 
    width: 100px; 
    margin: 5px; 

} 

.todo-task > .task-header{ 
    font-weight: bold; 
} 

.todo-task > .task-date{ 
    font-size: small; 
    font-style: italic; 
} 

.todo-task > .task-description{ 
    font-size: smaller; 
} 

Вот HTML-код

<div class="task-list"> 
    <h3>Add a task</h3> 
    <form id="todo-form"> 
    <input type="text" placeholder="Task Name" /> 
    <textarea placeholder="Description"></textarea> 
    <input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" /> 
    <input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" /> 
    </form> 

    <input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" /> 
    <div id="delete-div"> 
    Drag Here to Delete 
    </div> 
</div> 

<div class="task-list task-container" id="pending"> 
    <h3>Pending</h3> 
    <!--<div class="todo-task"> 
    <div class="task-header">Sample Header</div> 
    <div class="task-date">25/06/1992</div> 
    <div class="task-description">Lorem Ipsum Dolor Sit Amet</div> 
    </div>--> 
</div> 

Answer 1

Вам просто нужно изменить

.task-list { ширина: 250 пикселей;

(находится в самой верхней части CSS)

к чему-то вроде

.task-лист { ширина: 850px;

это позволило бы всем элементам в космосе стоять бок о бок ...