我正在关注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>
答案 0 :(得分:0)
您只需要更改
.task-list { 宽度:250像素;
(发现在你的CSS的最顶端)
类似
.task-list { 宽度:850px;
然后,这将使空间内的所有元素并排站立......