显示内嵌表单元素

我正在关注来自http://www.sitepoint.com/building-list-jquery-local-storage/ 的教程以构建待办事项列表，并且想要显示同一行中的元素。此刻，表单元素相互堆叠并垂直显示，但我希望它们垂直显示。我最终想达到的结果，看起来像这样：显示内嵌表单元素

enter image description here

这里是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>

来源

2014-09-13 user35434494

你的依赖关系呢？它是TW Boostrap？你能设置一个JSFiddle吗？ – felipekm 2014-09-13 19:25:09

您将'.task-list'的宽度设置为250px，并将每个输入的宽度设置为240px。他们如何能够并肩？ – Barmar 2014-09-13 19:25:10

我已将他的代码复制到小提琴中：http://jsfiddle.net/barmar/76w02s1z/ – Barmar 2014-09-13 19:25:32

你只需要改变

.task-list { 宽度：250px;

（在你的CSS的最顶部找到）

喜欢的东西

。任务列表{ 宽度：850像素;

这会给空间房间内的所有元素并排...

来源

2014-09-13 20:26:49 gavsgav

增加.task列表中的宽度doest help是在'pending'bod中并排显示元素 – user35434494 2014-09-13 20:37:23

显示内嵌表单元素

回答

相关问题