内联显示表单元素

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-list {     宽度：850px;

然后，这将使空间内的所有元素并排站立......